import { FC, ReactNode } from 'react'
import { IProduct } from '@/lib/interfaces'
import { ProductCard } from '@/components'

interface IProps {
    title: string;
    link: string;
    showcase?: IProduct[];
}

export const ProductSection: FC<IProps> = ({ title, link, showcase }): ReactNode => {
    if(!showcase)
        return null

    return <section className="my-9 w-full">
        <div className="flex items-center justify-between gap-4">
            <h3 className="font-light text-3xl text-amber-600 text-shadow-2xs">{title}</h3>

            <a href={link} className="rounded-md border-2 font-medium border-gray-300 hover:border-amber-600 hover:bg-amber-600 px-3 py-1 text-[#888] hover:text-white text-sm transition-colors ease-in duration-150 flex items-center justify-between gap-1">See more</a>
        </div>

        <div className="grid grid-cols-10 gap-4 my-4">
            {showcase.map(((product, i) => <div key={i} className="col-span-2">
                <ProductCard product={product} />
            </div>))}
        </div>
    </section>
}