import { useSubCategory } from "@/zustand/useSubCategory";
import { useLocale } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";

interface ProductCardProps {
  id: number;
  category: number;
  title: string;
  image: string;
  slug: string;
}

export default function Card({
  title,
  image,
  slug,
  id,
  category,
}: ProductCardProps) {
  const locale = useLocale();
  const router = useRouter();
  const setSubCategory = useSubCategory((state) => state.setSubCategory);

  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();

    setSubCategory({
      id,
      name: title,
      image,
      category,
    });
    router.push(`/${locale}/catalog_page/products`);
  };
  return (
    <Link href="#" onClick={handleClick}>
      <article className="group transition-all duration-300 hover:cursor-pointer max-sm:max-w-100 max-sm:mx-auto max-sm:w-full">
        {/* Image Container */}
        <div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-[95%] w-[90%] mx-auto overflow-hidden">
          <Image
            src={image || "/placeholder.svg"}
            alt={title}
            fill
            className="object-contain transition-transform duration-300 group-hover:scale-105"
            sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 30vw"
          />
        </div>

        {/* Content Container */}
        <div className="p-6 sm:p-4">
          <h3 className="text-lg text-center font-unbounded font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
            {title}
          </h3>
        </div>
      </article>
    </Link>
  );
}