import { CheckCircle2, XCircle, Clock } from 'lucide-react';

export type StatusChipVariant = 'success' | 'failed' | 'pending';

interface StatusChipProps {
  variant: StatusChipVariant;
  label: string;
  showIcon?: boolean;
}

const variantStyles: Record<StatusChipVariant, string> = {
  success: 'bg-teal-100 text-teal-800 border-teal-200',
  failed: 'bg-red-100 text-red-800 border-red-200',
  pending: 'bg-gray-100 text-gray-700 border-gray-200',
};

export function StatusChip({ variant, label, showIcon = true }: StatusChipProps) {
  const Icon =
    variant === 'success' ? CheckCircle2 : variant === 'failed' ? XCircle : Clock;
  return (
    <span
      className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium ${variantStyles[variant]}`}
    >
      {showIcon && <Icon className="h-4 w-4 shrink-0" />}
      {label}
    </span>
  );
}
