import Link from "next/link";
import Image from "next/image";
import { KeyRound } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import type { Product } from "@/lib/supabase/types";
import { formatPriceHT, formatPriceTTC } from "@/lib/utils";

export default function ProductCard({ product }: { product: Product }) {
  return (
    <Link href={`/catalogue/${product.id}`} className="block group">
      <Card className="h-full overflow-hidden transition-shadow group-hover:shadow-md">
        <div className="relative aspect-[4/3] w-full overflow-hidden bg-muted">
          {product.image_url ? (
            <Image
              src={product.image_url}
              alt={`${product.fabricant} ${product.modele}`}
              fill
              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
              className="object-cover transition-transform group-hover:scale-105"
            />
          ) : (
            <div className="flex h-full items-center justify-center text-muted-foreground">
              <KeyRound className="h-12 w-12 opacity-30" />
            </div>
          )}
          {product.commande_bloquee_sans_carte && (
            <Badge variant="warning" className="absolute right-2 top-2">
              Carte obligatoire
            </Badge>
          )}
        </div>
        <CardContent className="space-y-2 p-3">
          <div>
            <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
              {product.fabricant}
            </div>
            <div className="line-clamp-1 font-semibold">{product.modele}</div>
          </div>
          <div className="grid grid-cols-2 gap-2 text-sm">
            <div>
              <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
                Mon prix HT
              </div>
              <div className="font-bold text-primary">
                {formatPriceHT(product.prix_ht)}
              </div>
            </div>
            <div className="text-right">
              <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
                Conseillé TTC
              </div>
              <div className="font-medium text-foreground">
                {formatPriceTTC(product.prix_ttc_conseille)}
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </Link>
  );
}