import { useTranslation } from 'react-i18next';
import { Circle, Clock, CheckCircle2 } from 'lucide-react';
import { cn } from '@/lib/utils';

const STATUS_CONFIG = {
  todo: {
    icon: Circle,
    className: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
    labelKey: 'tasks.toDo',
  },
  in_progress: {
    icon: Clock,
    className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
    labelKey: 'tasks.inProgress',
  },
  done: {
    icon: CheckCircle2,
    className: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
    labelKey: 'tasks.done',
  },
} as const;

export function StatusBadge({ status, className }: { status: string | null; className?: string }) {
  const { t } = useTranslation();
  const conf = STATUS_CONFIG[(status ?? 'todo') as keyof typeof STATUS_CONFIG] ?? STATUS_CONFIG.todo;
  const Icon = conf.icon;
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium',
        conf.className,
        className,
      )}
    >
      <Icon className="h-3 w-3" />
      {t(conf.labelKey)}
    </span>
  );
}
