import { FC, ReactNode } from 'react'
import { IMenuItem, IWebsiteSettings } from '@/lib/interfaces'
import Image from 'next/image'

interface IProps {
    settings?: IWebsiteSettings;
    footerMenu?: IMenuItem[];
}

export const Footer: FC<IProps> = ({ settings, footerMenu }): ReactNode => {
    return <footer className="bg-amber-600 text-white py-8 px-7 grid grid-cols-4 gap-x-25 gap-y-4">
        <Image
            src={settings?.logo || ''}
            alt="Bigmandu"
            width={759}
            height={100}
            className="object-contain w-50 h-12.5"
            loading="eager"
        />

        <div className="flex flex-col gap-0.5">
            <strong>Bigmandu (Your wholesale partner)</strong>
            <address>{settings?.address}</address>
        </div>
        <div className="flex flex-col gap-0.5">
            <div className="grid grid-cols-2">
                <strong>Contact</strong>
                <span>
                    {settings?.phone && <a href={`tel:${settings.phone}`} className="transition-colors ease-in duration-150 hover:text-amber-300">{settings.phone}</a>}
                    {settings?.mobile && <>,<a href={`tel:${settings.mobile}`} className="mx-1 transition-colors ease-in duration-150 hover:text-amber-300">{settings.mobile}</a></>}
                </span>
                <strong>Email</strong>
                <a href={`email:${settings?.email}`} className="transition-colors ease-in duration-150 hover:text-amber-300">{settings?.email}</a>
            </div>
        </div>
        <div className="flex flex-col gap-0.5">
            <h5 className="font-semibold text-[18px]">New wholesale buyers can</h5>
            <ul className="flex flex-col gap-1 list-none p-0 m-0">
                {footerMenu?.map((item, i) => <li key={i}>
                    <a href="#" className="transition-colors ease-in duration-150 hover:text-amber-400">{item.title}</a>
                </li>)}
            </ul>
        </div>

        <div className="col-span-4 py-3 text-center text-sm italic">
            &copy; Bigmandu, {new Date().getFullYear()}. All Rights reserved. Website developed by <a href="https://linkedin.com/in/nitishrajuprety" target="_blank" className="transition-colors ease-in duration-150 hover:text-amber-300">Nitish Raj Uprety</a>.
        </div>
    </footer>
}