import Image from 'next/image';
import Link from 'next/link';

interface CategoryCardProps {
    category: {
        id: number;
        name: string;
        image_url: string;
    };
}

const CategoryCard: React.FC<CategoryCardProps> = ({ category }) => {
    return (
        <Link
            href={`/products?category_id=${category.id}`}
            className="category-card group block w-full"
        >
            <div className="relative aspect-square w-full rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300">
                <Image
                    src={category.image_url}
                    alt={category.name}
                    fill
                    className="object-cover transition-transform duration-300 group-hover:scale-110"
                    unoptimized={category.image_url?.startsWith('http')}
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-black/10 to-transparent group-hover:from-black/50" />
            </div>
            <h3 className="text-center mt-2 md:mt-3 text-[10px] md:text-base font-bold text-[var(--text-color)] group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors tracking-wide relative inline-block w-full truncate px-1">
                <span className="relative inline-block truncate max-w-full">
                    {category.name}
                    <span className="absolute left-0 right-0 bottom-0 h-0.5 bg-gray-400 dark:bg-gray-600 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-center"></span>
                </span>
            </h3>
        </Link>
    );
};

export default CategoryCard;
