"use client";

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

interface ProductCardProps {
  title: string;
  image: string;
  slug: string;
  getProduct: () => void;
}

export default function ProductCard({
  title,
  image,
  slug,
  getProduct,
}: ProductCardProps) {
  const locale = useLocale();
  const t = useTranslations();

  return (
    <Link
      href={`/${locale}/catalog_page/products/${slug}`}
      onClick={getProduct}
      className="group block"
    >
      <article className="
        relative
        bg-neutral-900
        border border-zinc-800
        rounded-xl
        overflow-hidden
        transition-all duration-300
        hover:border-red-600/60
        hover:shadow-[0_0_24px_0_rgba(220,38,38,0.15)]
        max-sm:max-w-100 max-sm:mx-auto max-sm:w-full
        h-95 flex flex-col 
      ">

        {/* Top accent line */}
        <div className="
          absolute top-0 left-0 right-0 h-0.5
          bg-linear-to-r from-transparent via-red-600 to-transparent
          opacity-0 group-hover:opacity-100
          transition-opacity duration-300
          z-10
        " />

        {/* Image Container */}
        <div className="
          relative
          h-48 sm:h-56 md:h-64
          bg-zinc-900
          border-b border-zinc-800
          overflow-hidden
        ">
          {/* Background pattern */}
          <div className="
            absolute inset-0
            bg-[radial-gradient(circle_at_center,_rgba(39,39,42,0.8)_0%,_rgba(9,9,11,1)_100%)]
          " />

          <Image
            src={image || "/placeholder.svg"}
            alt={title}
            fill
            className="
              object-contain
              p-4
              transition-transform duration-500
              group-hover:scale-105
              drop-shadow-[0_4px_12px_rgba(0,0,0,0.5)]
            "
            sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 30vw"
          />

          {/* Hover overlay */}
          <div className="
            absolute inset-0
            bg-red-600/5
            opacity-0 group-hover:opacity-100
            transition-opacity duration-300
          " />
        </div>

        {/* Content */}
        <div className="p-5">
          {/* Decorative line */}
          <div className="
            w-8 h-0.5
            bg-red-600
            mb-3
            transition-all duration-300
            group-hover:w-16
          " />

          <h3 className="
            text-sm sm:text-base
            font-bold
            text-zinc-100
            line-clamp-3
            leading-snug
            tracking-wide
            transition-colors duration-300
            group-hover:text-white
          ">
            {title}
          </h3>

          {/* Bottom row */}
          <div className="
            flex items-center justify-between
            mt-4 pt-4
            border-t border-zinc-800
          ">
            <span className="
              text-xs
              text-zinc-500
              tracking-widest
              uppercase
              font-medium
            ">
              { t("home.services.learnmore")}
            </span>

            {/* Arrow */}
            <div className="
              flex items-center justify-center
              w-7 h-7
              rounded-full
              border border-zinc-700
              text-zinc-500
              transition-all duration-300
              group-hover:border-red-600
              group-hover:text-red-500
              group-hover:bg-red-600/10
            ">
              <svg
                width="12"
                height="12"
                viewBox="0 0 12 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M2 6H10M10 6L7 3M10 6L7 9"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </div>
          </div>
        </div>
      </article>
    </Link>
  );
}