"use client"

import React from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { Heart, ShoppingBag } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { motion } from 'framer-motion'

interface ProductCardProps {
  id: number
  name: string
  price: number
  image: string
  isNew?: boolean
  isOnSale?: boolean
  salePrice?: number
  category?: string
}

export function ProductCard({ 
  id, 
  name, 
  price, 
  image, 
  isNew = false, 
  isOnSale = false, 
  salePrice, 
  category 
}: ProductCardProps) {
  return (
    <motion.div 
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className="group"
    >
      <Link href={`/product/${id}`} className="block">
        <div className="relative overflow-hidden mb-4">
          {/* Бейджи */}
          <div className="absolute top-3 left-3 z-10 flex flex-col gap-2">
            {isNew && (
              <div className="bg-secondary text-white text-xs py-1 px-3">
                НОВИНКА
              </div>
            )}
            {isOnSale && (
              <div className="bg-[#E2725B] text-white text-xs py-1 px-3">
                СКИДКА
              </div>
            )}
          </div>
          
          {/* Кнопки действий */}
          <div className="absolute top-3 right-3 z-10 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <Button 
              size="icon" 
              variant="secondary" 
              className="rounded-full bg-white text-primary hover:bg-white/90 shadow-md w-8 h-8"
            >
              <Heart className="h-4 w-4" />
              <span className="sr-only">Добавить в избранное</span>
            </Button>
            <Button 
              size="icon" 
              variant="secondary" 
              className="rounded-full bg-white text-primary hover:bg-white/90 shadow-md w-8 h-8"
            >
              <ShoppingBag className="h-4 w-4" />
              <span className="sr-only">Добавить в корзину</span>
            </Button>
          </div>
          
          {/* Изображение */}
          <div className="aspect-[3/4] relative overflow-hidden bg-tertiary/10">
            <Image
              src={image}
              alt={name}
              fill
              className="object-cover transition-transform duration-700 group-hover:scale-105"
            />
          </div>
          
          {/* Кнопка быстрого добавления в корзину */}
          <div className="absolute bottom-0 left-0 right-0 bg-white/80 backdrop-blur-sm py-3 px-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
            <Button 
              className="w-full bg-primary hover:bg-primary/90 text-white text-sm py-1"
            >
              ДОБАВИТЬ В КОРЗИНУ
            </Button>
          </div>
        </div>
        
        {/* Информация о товаре */}
        <div className="px-2">
          {category && (
            <div className="text-xs text-gray-500 mb-1">{category}</div>
          )}
          <h3 className="text-sm font-medium text-primary mb-1 tracking-wide line-clamp-2">{name}</h3>
          <div className="flex items-center gap-2">
            {isOnSale && salePrice ? (
              <>
                <p className="text-lg font-medium text-secondary">{salePrice.toLocaleString()} ₽</p>
                <p className="text-sm text-gray-500 line-through">{price.toLocaleString()} ₽</p>
              </>
            ) : (
              <p className="text-lg font-medium text-secondary">{price.toLocaleString()} ₽</p>
            )}
          </div>
        </div>
      </Link>
    </motion.div>
  )
}
