"use client";

import Link from "next/link";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import { routes } from "@/src/config/routes";

interface ProductCard {
    subTitle: string;
    title: string;
    link: string;
    imageUrl: string;
    target?: boolean;
    additionalFields?: {
        customUrl?: string;
        [key: string]: any;
    }[];
}

interface ProductGridProps {
    products: ProductCard[];
}

const ProductGrid = ({ products }: ProductGridProps) => {


    return (
        <section className="w-full">

            <div className="grid grid-cols-1 md:grid-cols-2">

                {products.map((product, index) => (
                    <div
                        key={index}
                        className="relative mb-6 ml-0 mr-3 flex min-h-[600px] justify-center overflow-hidden bg-cover bg-center p-6 text-center"
                        style={{
                            backgroundImage: `url(${process.env.NEXT_PUBLIC_API_IMAGE_URL}${product?.imageUrl})`,
                        }}
                    >
                        <div className="absolute inset-0 bg-black/30" />


                        {/* Content */}
                        <div className="relative z-10">

                            <h2
                                className="
                                    text-xl
                                    font-normal
                                    text-white
                                    sm:text-2xl
                                "
                            >
                                {product?.subTitle}
                            </h2>


                            <h1
                                className="
                                    mt-3
                                    text-4xl
                                    font-semibold
                                    tracking-wide
                                    text-white
                                    sm:text-5xl
                                "
                            >
                                {product?.title}
                            </h1>


                            <div className="mt-8 flex justify-center">

                                <Link
                                    href={product?.additionalFields?.[0]?.customUrl || '/'}
                                    className="
                                        group
                                        flex
                                        items-center
                                        gap-2
                                        text-base
                                        font-medium
                                        text-white
                                        transition
                                        hover:text-gray-200
                                    "
                                >
                                    Learn More

                                    <ArrowForwardIcon
                                        className="
                                            text-lg
                                            transition-transform
                                            duration-300
                                            group-hover:translate-x-1
                                        "
                                    />

                                </Link>

                            </div>

                        </div>

                    </div>
                ))}

            </div>

        </section>
    );
};

export default ProductGrid;