import Image from "next/image"
export interface SearchItemM {
    _id?: string | null,
    brand?: string | null,
    logo?: string | null,
    link: string,
    counts: string,
}

const SearcItem: React.FC<SearchItemM> = ({ brand, counts, link, logo }) => {

    return (

        <a href={link} className="flex flex-col gap-3 bg-white cursor-pointer border   pt-4 group">

            <div className="flex items-center justify-center  pt-10  ">
                {
                    logo && logo.trim() && logo !== "null" && logo !== "undefined" ? (
                        <Image src={logo} width={120} height={50} alt={brand || ''} />
                    ) : (
                        <div className="text-xl font-bold">{brand}</div>
                    )
                }

            </div>

            <div className="flex flex-col px-4 justify-start  min-h-36 items-center py-4">
                <span className="font-semibold text-[14px]   text-primary">  Bulunan Ürün Sayısı</span>
                <span className="text-lg text-head font-semibold">  ({counts}) </span>

            </div>

            <div>
                <div className="flex justify-between items-center   ">
                    <div className=" group-hover:bg-primary px-3 duration-300 text-primary font-semibold group-hover:text-white w-full h-full py-3 text-sm"> Seçenekleri İnceleyin</div>
                    <div className="basis-12 flex items-center text-center duration-300  font-semibold  group-hover:text-white group-hover:bg-black py-3 justify-center " > {' > '} </div>
                </div>
            </div>

        </a>
    )

}

export default SearcItem