interface CardCategoryProps {
  thumb_src: string;
  title: string;
  collection: string;
  cta?: string;
  className?: string;
}

export default function CardCategory({ thumb_src, title, collection, cta = 'ดูสินค้า', className = '' }: CardCategoryProps) {
  return (
    <div className={`relative rounded-xl overflow-hidden group ${className}`}>
      <img
        src={thumb_src}
        alt={title}
        className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
      />
      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
      <div className="absolute inset-0 flex flex-col justify-end p-6">
        <p className="text-white/80 text-sm mb-1">{collection}</p>
        <h3 className="text-white text-xl font-bold mb-3">{title}</h3>
        <a
          href={`/products?category=${title.toLowerCase()}`}
          className="inline-block bg-white text-gray-900 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-100 transition-colors"
        >
          {cta}
        </a>
      </div>
    </div>
  );
}
