"use client";

import Image from "next/image";
import ImageFallback from "../custom-components/image-fallback";
import { routes } from "@/src/config/routes";

interface AccessoryCard {
    title: string;
    image: string;
    link?: string;
    slug: string;
    productImageUrl: string;
    productTitle: string;
}

interface AccessoriesSectionProps {
    heading: string;
    items: AccessoryCard[];
}

export default function AccessoriesSection({
    heading,
    items,
}: AccessoriesSectionProps) {

    return (
        <section className=" bg-black py-16">
            <div className=" mx-auto px-5 sm:px-5 lg:px-30 md:px-8 2xl:px-45">

                <div className="w-full flex justify-center mb-12">
                    <div className="text-center max-w-xl">
                        <h3
                            className="
        text-center
        text-3xl
        md:text-7xl
        font-semibold
        bg-gradient-to-r
        from-[#bb13d1]
        via-[#ff6ec7]
        to-[#6a5cff]
        bg-clip-text
        text-transparent
      "
                        >
                            {heading}
                        </h3>
                    </div>
                </div>

                <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">

                    {items.map((item, index) => (
                        <a
                            key={index}
                            href={routes?.productDetails(item?.slug)}
                            rel="noopener noreferrer"
                            className="
                                group
                                overflow-hidden
                                bg-gradient-to-b
                                from-[#1c1c1c]
                                to-[#050505]
                                p-6
                                transition-all
                                duration-300
                                hover:-translate-y-2
                            "
                        >

                            {/* Image */}
                            <div className="
                                flex
                                h-[250px]
                                items-center
                                justify-center
                                overflow-hidden
                            ">
                                <ImageFallback
                                    src={item?.productImageUrl}
                                    alt={item.title}
                                    width={640}
                                    height={406}
                                    className="
                                        h-full
                                        w-full
                                        object-contain
                                        transition-transform
                                        duration-500
                                        group-hover:scale-105
                                    "
                                />
                            </div>


                            {/* Title */}
                            <div className="mt-6">
                                <h2 className="
                                    text-center
                                    text-xl
                                    font-light
                                    text-white
                                ">
                                    {item?.productTitle}
                                </h2>
                            </div>

                        </a>
                    ))}

                </div>

            </div>
        </section>
    );
}