import Image from "next/image"
import type { Product } from "@/types/product"
import { formatPrice } from "@/lib/formatters"
import { Badge } from "@/components/ui/Badge"

type ProductCardProps = {
  product: Product
}

export function ProductCard({ product }: ProductCardProps) {
  return (
    <div className="group block">
      <div className="overflow-hidden rounded-xl bg-surface">
        <div className="relative aspect-square">
          <Image
            src={product.image}
            alt={product.name}
            fill
            className="object-cover"
          />
          {product.stock > 0 && product.stock < 10 && (
            <div className="absolute left-2 top-2">
              <Badge variant="warning">Low Stock</Badge>
            </div>
          )}
          {product.stock === 0 && (
            <div className="absolute left-2 top-2">
              <Badge variant="error">Sold Out</Badge>
            </div>
          )}
        </div>
      </div>
      <div className="mt-3 space-y-1">
        <h3 className="text-sm font-semibold text-white">{product.name}</h3>
        <p className="text-xs capitalize text-silver">{product.category}</p>
        <p className="text-sm font-bold text-white">{formatPrice(product.price)}</p>
      </div>
    </div>
  )
}