import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import { Car, Download, Trash2, Edit } from 'lucide-react';

interface DriverLiveryItem {
  id: string;
  carId: string;
  carName: string;
  thumbnailUrl: string;
  uploadedAt: Date;
  isValidated: boolean;
}

interface LiveryCardProps {
  livery: DriverLiveryItem;
  onEdit?: (id: string) => void;
  onDownload?: (id: string) => void;
  onDelete?: (id: string) => void;
}

export default function LiveryCard({ livery, onEdit, onDownload, onDelete }: LiveryCardProps) {
  return (
    <Card className="overflow-hidden hover:border-primary-blue/50 transition-colors">
      {/* Livery Preview */}
      <div className="aspect-video bg-deep-graphite rounded-lg mb-4 flex items-center justify-center border border-charcoal-outline">
        <Car className="w-16 h-16 text-gray-600" />
      </div>

      {/* Livery Info */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <h3 className="font-semibold text-white">{livery.carName}</h3>
          {livery.isValidated ? (
            <span className="px-2 py-0.5 text-xs bg-performance-green/10 text-performance-green border border-performance-green/30 rounded-full">
              Validated
            </span>
          ) : (
            <span className="px-2 py-0.5 text-xs bg-warning-amber/10 text-warning-amber border border-warning-amber/30 rounded-full">
              Pending
            </span>
          )}
        </div>

        <p className="text-xs text-gray-500">
          Uploaded {new Date(livery.uploadedAt).toLocaleDateString()}
        </p>

        {/* Actions */}
        <div className="flex gap-2 pt-2">
          <Button
            variant="secondary"
            className="flex-1 px-3 py-1.5"
            onClick={() => onEdit?.(livery.id)}
          >
            <Edit className="w-4 h-4 mr-1" />
            Edit
          </Button>
          <Button
            variant="secondary"
            className="px-3 py-1.5"
            onClick={() => onDownload?.(livery.id)}
          >
            <Download className="w-4 h-4" />
          </Button>
          <Button
            variant="danger"
            className="px-3 py-1.5"
            onClick={() => onDelete?.(livery.id)}
          >
            <Trash2 className="w-4 h-4" />
          </Button>
        </div>
      </div>
    </Card>
  );
}