import type { Product } from "@/types";
import { Card } from "@/components/ui/Card";

interface ProductCardProps {
  product: Product;
  onClick?: () => void;
}

export function ProductCard({ product, onClick }: ProductCardProps) {
  return (
    <Card onClick={onClick} className="overflow-hidden p-0">
      <div className="aspect-square bg-gray-100 flex items-center justify-center text-4xl">
        {product.images?.[0] ? <img src={product.images[0]} alt={product.title} className="w-full h-full object-cover" /> : "📦"}
      </div>
      <div className="p-3">
        <h3 className="font-medium text-sm text-gray-800 truncate">{product.title}</h3>
        <div className="flex items-center justify-between mt-1">
          <span className="text-red-500 font-bold">¥{product.price}</span>
          <span className="text-xs text-gray-400">库存 {product.stock}</span>
        </div>
      </div>
    </Card>
  );
}