import { formatDateEST } from "@/lib/timezoneUtils";
import { Badge } from "@/components/ui/badge";

export default function ViolationsSection({ data }: { data: any[] }) {
  return (
    <div className="space-y-4">
      <h2 className="text-xl font-bold text-foreground border-b pb-2">Violations</h2>
      <div className="space-y-3">
        {data.map((item) => (
          <div key={item.id} className="p-4 bg-muted/30 rounded-lg border">
            <div className="flex items-start justify-between">
              <div>
                <p className="font-semibold text-foreground">{item.title}</p>
                <p className="text-xs text-muted-foreground mt-1">
                  {item.created_at ? formatDateEST(item.created_at) : "-"}
                  {item.address && ` · ${item.address}`}
                  {item.violation_type && ` · ${item.violation_type}`}
                </p>
              </div>
              {String(item.status || '').toLowerCase().replace(/[\s-]+/g, '_') === 'recommended_for_fining' ? (
                <Badge className="border-2 border-red-600 text-red-700 bg-red-50 font-bold uppercase tracking-wide">
                  Recommended for Fining
                </Badge>
              ) : (
                <Badge variant="outline">{item.status}</Badge>
              )}
            </div>
            {item.description && (
              <p className="text-sm text-muted-foreground mt-2">{item.description}</p>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}
