import { Card } from '@/ui/Card';
import { Button } from '@/ui/Button';
import { Car, Download, Trash2, Edit } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';

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 function LiveryCard({ livery, onEdit, onDownload, onDelete }: LiveryCardProps) {
  return (
    <Card className="overflow-hidden hover:border-primary-blue/50 transition-colors">
      {/* Livery Preview */}
      <Box height={48} backgroundColor="deep-graphite" rounded="lg" mb={4} display="flex" center border borderColor="charcoal-outline">
        <Icon icon={Car} size={16} color="text-gray-600" />
      </Box>

      {/* Livery Info */}
      <Stack gap={3}>
        <Stack direction="row" align="center" justify="between">
          <Heading level={3}>{livery.carName}</Heading>
          {livery.isValidated ? (
            <Badge variant="success">
              Validated
            </Badge>
          ) : (
            <Badge variant="warning">
              Pending
            </Badge>
          )}
        </Stack>

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

        {/* Actions */}
        <Stack direction="row" gap={2} pt={2}>
          <Button
            variant="secondary"
            size="sm"
            fullWidth
            onClick={() => onEdit?.(livery.id)}
            icon={<Icon icon={Edit} size={4} />}
          >
            Edit
          </Button>
          <Button
            variant="secondary"
            size="sm"
            onClick={() => onDownload?.(livery.id)}
            icon={<Icon icon={Download} size={4} />}
            aria-label="Download"
          >
            {null}
          </Button>
          <Button
            variant="danger"
            size="sm"
            onClick={() => onDelete?.(livery.id)}
            icon={<Icon icon={Trash2} size={4} />}
            aria-label="Delete"
          >
            {null}
          </Button>
        </Stack>
      </Stack>
    </Card>
  );
}