import Image from 'next/image';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { type Alternative } from '@/lib/services/products';

interface AlternativeCardProps {
  alternative: Alternative;
}

export function AlternativeCard({ alternative }: AlternativeCardProps) {
  return (
    <Card className="overflow-hidden">
      <CardHeader className="p-4">
        <div className="flex items-start justify-between">
          <div>
            <CardTitle className="text-lg">{alternative.name}</CardTitle>
            <CardDescription>{alternative.company}</CardDescription>
          </div>
          <Badge className="ml-2 bg-red-100 text-red-800 hover:bg-red-100">Canadian</Badge>
        </div>
      </CardHeader>
      {alternative.image_url && (
        <div className="relative w-full h-48">
          <Image 
            src={alternative.image_url} 
            alt={alternative.name}
            fill
            className="object-cover" 
          />
        </div>
      )}
      <CardContent className="p-4">
        <p className="text-sm text-muted-foreground">{alternative.description}</p>
      </CardContent>
      <CardFooter className="p-4 pt-0">
        <Badge variant="secondary">{alternative.category}</Badge>
      </CardFooter>
    </Card>
  );
}