import { FC, ReactNode } from 'react'
import { Phone, Search } from 'lucide-react'
import Image from 'next/image'
import { NavDropdown } from './nav-dropdown'
import { IBrand, IMenuItem, IStore, IWebsiteSettings } from '@/lib/interfaces'
import Link from 'next/link'

interface IProps {
    settings?: IWebsiteSettings;
    topMenu?: IMenuItem[];
    mainMenu?: IMenuItem[];
    stores?: IStore[];
    brands?: IBrand[];
}

export const Header: FC<IProps> = ({ settings, topMenu, mainMenu, stores, brands }): ReactNode => {
    return <header className="bg-white">
        <div className="flex justify-between text-[11px] text-amber-600 border-b border-gray-300 px-7 py-2">
            <ul className="flex gap-4 list-none p-0 m-0 font-bold">
                {topMenu?.map((item, i) => <li key={i}>
                    <a href="#" className="transition-colors ease-in duration-150 hover:text-[#888]">{item.title}</a>
                </li>)}
            </ul>

            {(settings?.phone || settings?.mobile) && <div className="flex items-center font-bold">
                <Phone fill={'#fff'} size="11px" className="me-2"/>
                For Wholesale Inquiry
                {settings?.phone && <a href={`tel:${settings.phone}`} className="ms-2 transition-colors ease-in duration-150 hover:text-[#888]">{settings.phone}</a>}
                {settings?.mobile && <>,<a href={`tel:${settings.mobile}`} className="mx-2 transition-colors ease-in duration-150 hover:text-[#888]">{settings.mobile}</a></>}
            </div>}

            <ul className="flex gap-4 list-none p-0 m-0 font-bold">
                <li>
                    <a href="#" className="transition-colors ease-in duration-150 hover:text-[#888]">Login</a>
                </li>
                <li>
                    <a href="#" className="transition-colors ease-in duration-150 hover:text-[#888]">Register</a>
                </li>
            </ul>
        </div>

        <div className="flex items-center justify-between text-amber-600 px-7 py-5">
            <Link href="/">
                <Image
                    src={settings?.logo || ''}
                    alt="Bigmandu"
                    width={759}
                    height={100}
                    className="object-contain w-75 h-12.5 me-14"
                    loading="eager"
                />
            </Link>

            <div className="flex w-full h-10 text-sm">
                <input
                    type="text"
                    placeholder="Search..."
                    className="flex-1 rounded-l-md border border-r-0 border-gray-300 focus:border-amber-600 px-4 py-1 focus:outline-none focus:ring-0 focus:ring-transparent placeholder:text-gray-400"
                />

                <button
                    type="button"
                    className="rounded-r-md border border-gray-300 hover:border-amber-600 hover:bg-amber-600 px-4 py-1 text-[#888] hover:text-white transition-colors ease-in duration-150 flex items-center justify-between gap-1"
                >
                    <Search size={14} />
                    Search
                </button>
            </div>

            <div className="font-semibold ml-14 text-[12px] text-[#888]">
                To view wholesale price
                please register and login
            </div>
        </div>

        <nav className="bg-amber-600 text-white text-[13px] px-4">
            <ul className="flex gap-4 list-none p-0 m-0 font-bold">
                <NavDropdown
                    label="By Store"
                    link="#"
                    links={stores?.map(store => ({
                        label: store.name,
                        link: '#'
                    })) || []}
                />

                <NavDropdown
                    label="By Brand"
                    link="#"
                    links={brands?.map(brand => ({
                        label: brand.name,
                        link: '#'
                    })) || []}
                />

                {mainMenu && mainMenu.map((menu, i) => <NavDropdown
                    key={i}
                    label={menu.title}
                    link="#"
                    links={menu.menu?.children?.map(category => ({
                        label: category.name,
                        link: '#',
                    })) || []}
                />)}
            </ul>
        </nav>
    </header>
}