// React import removed - not needed with JSX transform
import { ShieldCheck, ShieldAlert, Clock } from 'lucide-react';
import type { CertificationStatus } from '../types';

interface CertificationBadgeProps {
  status?: CertificationStatus;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

export function CertificationBadge({ status, size = 'md', className = '' }: CertificationBadgeProps) {
  if (!status) return null;

  const sizeClasses = {
    sm: 'text-xs px-2 py-0.5',
    md: 'text-sm px-3 py-1',
    lg: 'text-base px-4 py-1.5',
  };

  const iconSize = {
    sm: 12,
    md: 14,
    lg: 16,
  };

  const getBadgeConfig = (status: CertificationStatus) => {
    switch (status) {
      case 'standard 2023':
        return {
          icon: ShieldCheck,
          bgColor: 'bg-emerald-100',
          textColor: 'text-emerald-800',
          borderColor: 'border-emerald-300',
          label: 'Standard 2023',
        };
      case 'standard 2020':
        return {
          icon: ShieldCheck,
          bgColor: 'bg-blue-100',
          textColor: 'text-blue-800',
          borderColor: 'border-blue-300',
          label: 'Standard 2020',
        };
      case 'in progress':
        return {
          icon: Clock,
          bgColor: 'bg-yellow-100',
          textColor: 'text-yellow-800',
          borderColor: 'border-yellow-300',
          label: 'In Progress',
        };
      case 'nonstandard':
        return {
          icon: ShieldAlert,
          bgColor: 'bg-gray-100',
          textColor: 'text-gray-700',
          borderColor: 'border-gray-300',
          label: 'Non-Standard',
        };
    }
  };

  const config = getBadgeConfig(status);
  const Icon = config.icon;

  return (
    <span
      className={`inline-flex items-center gap-1.5 font-medium rounded-full border ${config.bgColor} ${config.textColor} ${config.borderColor} ${sizeClasses[size]} ${className}`}
    >
      <Icon size={iconSize[size]} />
      <span>{config.label}</span>
    </span>
  );
}
