import React from 'react';
import { DocumentStatus } from '../types';
import { Check } from 'lucide-react';

interface BadgeProps {
  status: DocumentStatus | 'Exported';
}

export const Badge: React.FC<BadgeProps> = ({ status }) => {
  if (status === 'Exported') {
    return (
      <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-warm-selected text-warm-text-secondary">
        <Check size={12} strokeWidth={3} />
        Exported
      </span>
    );
  }

  const styles = {
    [DocumentStatus.PENDING]: "bg-white border border-warm-divider text-warm-text-secondary",
    [DocumentStatus.LABELED]: "bg-warm-text-secondary text-white border border-transparent",
    [DocumentStatus.VERIFIED]: "bg-warm-state-success/10 text-warm-state-success border border-warm-state-success/20",
    [DocumentStatus.PARTIAL]: "bg-warm-state-warning/10 text-warm-state-warning border border-warm-state-warning/20",
  };

  const icons = {
    [DocumentStatus.VERIFIED]: <Check size={12} className="mr-1" />,
    [DocumentStatus.PARTIAL]: <span className="mr-1 text-[10px] font-bold">!</span>,
    [DocumentStatus.PENDING]: null,
    [DocumentStatus.LABELED]: null,
  }

  return (
    <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border ${styles[status]}`}>
      {icons[status]}
      {status}
    </span>
  );
};