import type { DeliveryStatus } from '../../types';
import { statusLabels } from '../../types';

interface StatusBadgeProps {
  status: DeliveryStatus;
  onClick?: () => void;
  size?: 'sm' | 'md' | 'lg';
}

export const StatusBadge = ({ status, onClick, size = 'md' }: StatusBadgeProps) => {
  const baseStyles = 'inline-flex items-center justify-center font-medium rounded-full transition-colors';
  
  const variants = {
    new: 'bg-[#ffdcc3] text-[#6e3900]',
    delivered: 'bg-[#dcfce7] text-[#166534]',
  };
  
  const sizes = {
    sm: 'px-2 py-0.5 text-xs',
    md: 'px-3 py-1 text-sm',
    lg: 'px-4 py-2 text-base',
  };
  
  const clickableStyles = onClick ? 'cursor-pointer hover:opacity-80 active:scale-95' : '';
  
  return (
    <span
      className={`${baseStyles} ${variants[status]} ${sizes[size]} ${clickableStyles}`}
      onClick={onClick}
    >
      {statusLabels[status]}
    </span>
  );
};