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

import { Badge } from '@/Components/ui/badge';
import type { TermStatus } from '@/hooks/useContentScore';

interface TermChecklistItemProps {
  term: TermStatus;
}

function StatusIcon({ status }: { status: TermStatus['status'] }) {
  switch (status) {
    case 'covered':
      return <CheckCircle2 className="h-4 w-4 text-success shrink-0" />;
    case 'underused':
      return <AlertTriangle className="h-4 w-4 text-warning shrink-0" />;
    case 'missing':
      return <XCircle className="h-4 w-4 text-destructive shrink-0" />;
  }
}

export default function TermChecklistItem({ term }: TermChecklistItemProps) {
  return (
    <div className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-muted/50 transition-colors">
      <StatusIcon status={term.status} />

      <span className="text-sm flex-1 min-w-0 truncate" title={term.term}>
        {term.term}
      </span>

      <div className="flex items-center gap-1 shrink-0">
        {term.in_title && (
          <Badge
            variant="outline"
            className="text-xs px-1 py-0 h-4"
            aria-label="Found in competitor page titles"
          >
            T
          </Badge>
        )}
        {term.in_headings && (
          <Badge
            variant="outline"
            className="text-xs px-1 py-0 h-4"
            aria-label="Found in competitor headings"
          >
            H
          </Badge>
        )}
        {term.present && (
          <span className="text-xs text-muted-foreground tabular-nums">{term.frequency}x</span>
        )}
      </div>
    </div>
  );
}