import Image from "next/image";
import React from "react";
import {ProductCategory} from "@/shared/types/productCategory";
import {Link} from "@/shared/config/i18n/navigation";

interface CategoryCardProps{
  category: ProductCategory
}

export const CategoryCard = ({category}: CategoryCardProps) => {
  return (
      <Link className={"bg-white p-10 flex flex-col justify-center items-center"} href={`/category/${category.id}`}>
          <Image className={"mx-auto mb-5 filter hue-rotate-[-40deg] saturate-200 brightness-75"} src={category.image}
                 alt={"category"} width={50} height={50}/>
          <h2 className="text-xl font-bold text-center">{category.name}</h2>
      </Link>
  )
}