'use client';

import Link from 'next/link';
import { ChevronRight } from 'lucide-react';
import { RaceResultViewModel } from '@/lib/view-models/RaceResultViewModel';

interface RaceResultCardProps {
  race: {
    id: string;
    track: string;
    car: string;
    scheduledAt: string;
  };
  result: RaceResultViewModel;
  league?: {
    name: string;
  };
  showLeague?: boolean;
}

export default function RaceResultCard({
  race,
  result,
  league,
  showLeague = true,
}: RaceResultCardProps) {
  
  const getPositionColor = (position: number) => {
    if (position === 1) return 'bg-green-400/20 text-green-400';
    if (position === 2) return 'bg-gray-400/20 text-gray-400';
    if (position === 3) return 'bg-warning-amber/20 text-warning-amber';
    return 'bg-charcoal-outline text-gray-400';
  };

  return (
    <Link
      href={`/races/${race.id}`}
      className="block p-4 rounded bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/50 transition-colors group"
    >
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center gap-3">
          <div className={`w-8 h-8 rounded flex items-center justify-center font-bold text-sm ${getPositionColor(result.position)}`}>
            P{result.position}
          </div>
          <div>
            <div className="text-white font-medium group-hover:text-primary-blue transition-colors">
              {race.track}
            </div>
            <div className="text-sm text-gray-400">{race.car}</div>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <div className="text-right">
            <div className="text-sm text-gray-400">
              {new Date(race.scheduledAt).toLocaleDateString('en-US', {
                month: 'short',
                day: 'numeric',
                year: 'numeric',
              })}
            </div>
            {showLeague && league && (
              <div className="text-xs text-gray-500">{league.name}</div>
            )}
          </div>
          <ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors" />
        </div>
      </div>
      <div className="flex items-center gap-4 text-xs text-gray-500">
        <span>Started P{result.startPosition}</span>
        <span>•</span>
        <span className={result.incidents === 0 ? 'text-green-400' : result.incidents > 2 ? 'text-red-400' : ''}>
          {result.incidents}x incidents
        </span>
        {result.position < result.startPosition && (
          <>
            <span>•</span>
            <span className="text-green-400">
              +{result.startPosition - result.position} positions
            </span>
          </>
        )}
      </div>
    </Link>
  );
}