import Link from 'next/link'
import type { Product } from '@homaroma/types'
import { getCategoryImage, formatPrice } from '@homaroma/types'

interface ProductCardProps {
  product: Product
}

export default function ProductCard({ product }: ProductCardProps) {
  return (
    <div className="glass glass-hover rounded-2xl overflow-hidden flex flex-col group p-1.5 md:p-2">
      <div className="h-40 md:h-64 overflow-hidden rounded-xl relative">
        <img
          src={product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(product.category.name)}
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
          alt={product.scent.name}
        />
        {/* Category badge */}
        <div className="absolute top-4 left-4 glass px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest text-cyan-glow">
          {product.category.name}
        </div>
        {/* Available badge */}
        <div className="hidden md:block absolute top-4 right-4 glass px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest">
          Available
        </div>
      </div>

      <div className="p-3 md:p-6 space-y-2 md:space-y-4 flex flex-col flex-1">
        <div className="flex flex-col md:flex-row md:justify-between md:items-start gap-1">
          <div>
            <h3 className="text-sm md:text-xl font-bold leading-tight line-clamp-1">
              {product.scent.name}
            </h3>
            <p className="text-[10px] md:text-xs text-slate-400 mt-0.5 md:mt-1 uppercase tracking-widest line-clamp-1">
              {product.category.name}
            </p>
          </div>
          <span className="text-cyan-glow font-bold text-xs md:text-lg">
            {formatPrice(product.variants[0]?.price)}
          </span>
        </div>

        {/* Variants (sizes) */}
        <div className="hidden md:flex flex-wrap gap-1.5 md:gap-2">
          {product.variants.map((v) => (
            <div key={v.id} className="glass px-1.5 py-0.5 md:px-2.5 md:py-1 rounded-lg text-[8px] md:text-[10px] uppercase tracking-wider">
              {v.size}
            </div>
          ))}
        </div>

        <div className="flex-1" />

        <Link
          href={`/products/${product.id}`}
          className="block w-full py-2 md:py-3 text-center bg-white/10 hover:bg-white text-white hover:text-night-900 rounded-lg font-bold uppercase tracking-widest text-[10px] md:text-xs transition-all duration-300"
        >
          Discover
        </Link>
      </div>
    </div>
  )
}