import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { Product } from '@/types/types';
import { Heart, Wrench } from 'lucide-react';
import { formatCurrency } from '@/lib/utils';

interface ProductCardProps {
  product: Product;
}

export function ProductCard({ product }: ProductCardProps) {
  // Jeśli ma warianty, przycisk prowadzi do karty z wariantami
  const hasVariants = product.variants && product.variants.length > 0;
  
  return (
    <div className="group flex flex-col bg-white rounded-2xl border border-border overflow-hidden hover:shadow-xl transition-all duration-300">
      {/* Obraz */}
      <Link href={`/sklep/${product.slug}`} className="relative aspect-square p-6 bg-slate-50 flex items-center justify-center overflow-hidden">
        {/* Placeholder tagów */}
        <div className="absolute top-4 left-4 z-10 flex flex-col gap-2">
          {product.features?.slice(0, 2).map((feat, idx) => (
             <span key={idx} className="bg-white/90 backdrop-blur-sm text-primary text-[10px] font-bold px-2 py-1 rounded shadow-sm border border-border/50 uppercase">
               {feat}
             </span>
          ))}
        </div>

        {/* Serce */}
        <button className="absolute top-4 right-4 z-10 p-2 bg-white/90 backdrop-blur-sm rounded-full text-text-muted hover:text-red-500 hover:bg-white transition-colors shadow-sm">
          <Heart className="w-5 h-5" />
        </button>

        <Image
          src={product.image || 'https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=800&q=80'}
          alt={product.name}
          width={400}
          height={400}
          className="object-contain w-full h-full transition-transform duration-500 group-hover:scale-105"
        />
      </Link>

      {/* Treść */}
      <div className="flex flex-col flex-grow p-6">
        <div className="text-xs font-bold text-text-muted uppercase tracking-wider mb-1">
          {product.brand}
        </div>
        <h3 className="text-xl font-bold text-primary font-heading leading-tight mb-2 group-hover:text-accent transition-colors">
          <Link href={`/sklep/${product.slug}`}>
            {product.name}
          </Link>
        </h3>
        
        {/* Informacja o mocy */}
        <div className="text-sm font-medium text-text-muted mb-4">
          Moc chłodnicza: <span className="text-primary">{product.power} kW</span>
        </div>

        {/* Ceny */}
        <div className="mt-auto space-y-3">
          <div className="flex flex-col gap-1">
             <div className="text-2xl font-extrabold text-primary font-heading">
               {formatCurrency(product.price)} <span className="text-sm text-text-muted font-normal">samo urządzenie</span>
             </div>
             {product.priceWithInstall && (
               <div className="flex items-center gap-1.5 text-sm font-bold text-green-600 bg-green-50 px-2 py-1 rounded w-fit">
                 <Wrench className="w-3.5 h-3.5" />
                 od {formatCurrency(product.priceWithInstall)} z montażem
               </div>
             )}
          </div>

          <Link href={`/sklep/${product.slug}`} className="block mt-4">
            <button className="btn btn-outline btn-primary bg-white w-full font-semibold">
              {hasVariants ? 'Wybierz wariant' : 'Zobacz szczegóły'}
            </button>
          </Link>
        </div>
      </div>
    </div>
  );
}