import Image from "next/image"
import { Heart } from 'lucide-react'
import { Button } from "./ui/button"
import { Badge } from "./ui/badge"

interface ProductCardProps {
  product: {
    id: number
    title: string
    price: number
    oldPrice: number
    discount: number
    image: string
    isHotDeal?: boolean
    isSale?: boolean
  }
}

export function ProductCard({ product }: ProductCardProps) {
  return (
    <div className="group relative bg-white rounded-lg p-2 transition-shadow hover:shadow-lg">
      <div className="relative aspect-square mb-2">
        <Image
          src={product.image}
          alt={product.title}
          fill
          className="object-cover rounded-lg"
        />
        <Button
          variant="ghost"
          size="icon"
          className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
        >
          <Heart className="h-5 w-5" />
        </Button>
        {product.isHotDeal && (
          <div className="absolute top-2 left-2 bg-pink-500 text-white px-2 py-1 text-xs font-medium rounded">
            НАРАСХВАТ
          </div>
        )}
      </div>
      <div className="space-y-2">
        <div className="flex items-baseline gap-2">
          <span className="text-xl font-bold">{product.price} ₽</span>
          <span className="text-sm text-muted-foreground line-through">
            {product.oldPrice} ₽
          </span>
          <span className="text-sm text-red-500">-{product.discount}%</span>
        </div>
        <h3 className="text-sm line-clamp-2">{product.title}</h3>
        {product.isSale && (
          <Badge variant="destructive" className="mt-2">
            Распродажа
          </Badge>
        )}
      </div>
    </div>
  )
}