import React from 'react';
import { motion } from 'framer-motion';
import type { PlanStatus } from '../types';

interface StatusBadgeProps {
  status: PlanStatus;
  size?: 'sm' | 'md' | 'lg';
}

const statusConfig: Record<string, { label: string; gradient: string }> = {
  pending: { label: '待确定', gradient: 'from-amber-400 to-orange-400' },
  producing: { label: '生产中', gradient: 'from-amber-400 to-orange-400' },
  completed: { label: '已完成', gradient: 'from-green-400 to-emerald-400' }
};

const sizeConfig: Record<string, string> = {
  sm: 'px-2 py-0.5 text-xs',
  md: 'px-3 py-1 text-sm',
  lg: 'px-4 py-1.5 text-base'
};

export function StatusBadge({ status, size = 'md' }: StatusBadgeProps) {
  const config = statusConfig[status] || { label: status, gradient: 'from-gray-400 to-gray-500' };
  const sizeClass = sizeConfig[size];

  return (
    <motion.span
      initial={{ scale: 0.8, opacity: 0 }}
      animate={{ scale: 1, opacity: 1 }}
      transition={{ type: 'spring', stiffness: 500 }}
      className={`inline-flex items-center rounded-lg font-medium bg-gradient-to-r ${config.gradient} text-white shadow-sm ${sizeClass}`}
    >
      {config.label}
    </motion.span>
  );
}