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

export interface Category {
    id: number | string;
    title: string;
    image: string;
    href: string;
}

interface Props {
    category: Category;
}

export default function CategoryCard({ category }: Props) {
    return (
        <Link
            href={category.href}
            className="group relative block h-36 sm:h-40 overflow-hidden rounded-2xl shadow-lg"
        >
            <Image
                src={category.image}
                alt={category.title}
                fill
                className="object-cover transition duration-500 group-hover:scale-110"
            />

            <div className="absolute bottom-3 left-3 right-3 text-base font-normal text-white">
                {category.title}
            </div>
        </Link>
    );
}