import { routes } from '@/lib/routing/RouteConfig';
import { ProtestListItem } from './ProtestListItem';

interface Protest {
  id: string;
  status: string;
  protestingDriverId: string;
  accusedDriverId: string;
  filedAt: string;
  incident: {
    lap: number;
    description: string;
  };
  proofVideoUrl?: string;
  decisionNotes?: string;
}

interface Driver {
  id: string;
  name: string;
}

interface ProtestCardProps {
  protest: Protest;
  protester?: Driver;
  accused?: Driver;
  isAdmin: boolean;
  onReview: (id: string) => void;
  formatDate: (date: string) => string;
}

export function ProtestCard({ protest, protester, accused, isAdmin, onReview, formatDate }: ProtestCardProps) {
  const daysSinceFiled = Math.floor(
    (Date.now() - new Date(protest.filedAt).getTime()) / (1000 * 60 * 60 * 24)
  );
  const isUrgent = daysSinceFiled > 2 && protest.status === 'pending';

  return (
    <ProtestListItem
      protesterName={protester?.name || 'Unknown'}
      protesterHref={routes.driver.detail(protest.protestingDriverId)}
      accusedName={accused?.name || 'Unknown'}
      accusedHref={routes.driver.detail(protest.accusedDriverId)}
      status={protest.status}
      isUrgent={isUrgent}
      daysOld={daysSinceFiled}
      lap={protest.incident.lap}
      filedAtLabel={formatDate(protest.filedAt)}
      description={protest.incident.description}
      proofVideoUrl={protest.proofVideoUrl}
      decisionNotes={protest.decisionNotes}
      isAdmin={isAdmin}
      onReview={() => onReview(protest.id)}
    />
  );
}