ignum/pages/products/catalog.tsx

// import { useTranslations } from "next-intl";
// import Image from "next/image";
// import Link from "next/link";

// interface CatalogProps {
//   image: string;
//   title: string;
//   slug: string;
//   description: string;
//   id:string;
// }

// export default function CatalogCard({
//   image,
//   title,
//   slug,
//   description,
//   id,
// }: CatalogProps) {
//   const t = useTranslations();
//   return (
//     <Link
//       href={`/products?category=${id}`}
//       className="group h-118 flex flex-col items-center justify-start" // Added 'group' here
//     >
//       <div className="h-full flex flex-col justify-between group-hover:scale-105 transition ease-in-out">
//         <p className="text-white text-2xl font-unbounded font-semibold text-center transition-colors">
//           {title}
//         </p>
//         <p className="text-white/50 font-almarai font-medium text-center">
//           {t(`${description}`)}
//         </p>
//         <Image
//           src={image}
//           alt="image"
//           width={400}
//           height={90}
//           className="h-90! rounded-xl object-contain bg-[#444242] transition-colors duration-300" // Added smooth transition
//         />
//       </div>
//     </Link>
//   );
// }

// bg-[#444242]
"use client";
import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import { ArrowUpRight } from "lucide-react";
import { useCategory } from "@/zustand/useCategory";
import { useSubCategory } from "@/zustand/useSubCategory";

interface CatalogProps {
  id: number;
  image: string;
  title: string;
  description: string;
  have_sub_category: boolean;
}

export default function CatalogCard({
  image,
  title,
  description,
  id,
  have_sub_category,
}: CatalogProps) {
  const t = useTranslations();
  const locale = useLocale();
  const setCategory = useCategory((state) => state.setCategory);
  const clearSubCategory = useSubCategory((state) => state.clearSubCategory);
  const item = {
    image: image,
    name: title,
    description: description,
    id: id,
    have_sub_category: have_sub_category,
  };

  const updateZustands = () => {
    setCategory(item);
    clearSubCategory();
  };

  const navigateLink = have_sub_category
    ? `/${locale}/catalog_page/subCategory?category=${id}`
    : `/${locale}/catalog_page/products?category=${id}`;

  return (
    <Link
      href={navigateLink}
      onClick={updateZustands}
      className="group relative h-112.5 w-full overflow-hidden rounded-2xl bg-[#171616] bg-linear-to-br from-[#2a2a2a] to-black border hover:border-red-700 border-white/10 transition-all duration-500 hover:-translate-y-1"
    >
      {/* Background glow effect */}
      <div className="absolute inset-0 bg-linear-to-t from-red-600/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

      {/* Decorative corner accent */}
      <div className="absolute top-0 right-0 w-24 h-24 bg-linear-to-br from-red-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-00 transition-opacity duration-500" />

      {/* Content container */}
      <div className="relative h-full flex flex-col p-6">
        {/* Title section */}
        <div className="mb-4">
          <div className="flex items-start justify-between mb-2">
            <h3 className="text-2xl font-unbounded font-bold text-white leading-tight transition-colors duration-300">
              {title}
            </h3>
            <div className="shrink-0 w-8 h-8 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-red-500 transition-all duration-300 group-hover:scale-110">
              <ArrowUpRight className="w-4 h-4 text-white" strokeWidth={2.5} />
            </div>
          </div>

          {/* Description */}
          <p className="text-sm font-almarai text-white/60 line-clamp-2 group-hover:text-white/80 transition-colors duration-300">
            {description}
          </p>
        </div>

        {/* Image container with elegant frame */}
        <div className="relative flex-1 rounded-xl overflow-hidden bg-linear-to-br from-[#444242] to-gray-900/50 border border-white/5 group-hover:border-white/20 transition-all duration-500">
          {/* Animated gradient overlay */}
          <div className="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent z-10" />

          {/* Image */}
          <div className="relative w-full h-full">
            <Image
              src={image}
              alt={title}
              fill
              className="object-contain p-4 transition-transform duration-700 group-hover:scale-105"
            />
          </div>

          {/* Hover shimmer effect */}
          {/* <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000" />
          </div> */}
        </div>

        {/* Bottom accent bar */}
        <div className="mt-4 h-1 w-0 bg-linear-to-r from-red-500 to-red-600 group-hover:w-full transition-all duration-500 rounded-full" />
      </div>

      {/* Subtle noise texture overlay */}
      <div
        className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' /%3E%3C/svg%3E")`,
        }}
      />
    </Link>
  );
}