import { footerL, footerR } from "@/constans";
import Image from "next/image";
import Linkedin from "../icons/Linkedin";
import Telegram from "../icons/Telegram";
import Whatsapp from "../icons/Whatsapp";
import Instagram from "../icons/Instagram";
import Link from "next/link";

const socialMedias = [
    <Linkedin />,
    <Telegram />,
    <Whatsapp />,
    <Instagram />
]

const Namads = [
    '/assets/images/footer-etehadie.png',
    '/assets/images/footer-r.png',
    '/assets/images/footer-namad.png'
]

function Footer() {
    return (
        <div>
            <span className="h-px bg-[#D7D7D7] w-full block"></span>
            <div className="pt-[40px] pb-[60px] flex items-start justify-between">
                {/* Right */}
                <div className="flex gap-[30px] flex-col items-start">
                    {/* Icon */}
                    <div className="flex items-center justify-start gap-[5px]">
                        <Image
                            alt="logo"
                            width={30}
                            height={30}
                            src='/assets/images/logo.png'
                        />
                        <p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
                    </div>
                    <p
                        className="text-[#616161] text-[14px] font-normal"
                    >724 یک وبسایت نوبت دهی آنلاین می باشد که<br /> بستری آسان برای پزشکان و بیماران فراهم کرده<br /> است.     </p>
                    <ul className="flex items-center gap-3">
                        {Namads.map(src => (
                            <li>
                                <Image
                                    alt="logo"
                                    width={48}
                                    height={48}
                                    src={src}
                                />
                            </li>
                        ))}
                    </ul>
                </div>

                {/* Center */}
                <ul className="flex flex-col gap-3">
                    {footerR.map((item, idx) => (
                        <li
                            key={idx}
                            className={`
                            border-0 border-b-2 border-solid 
                            ${idx === 0 ? 'text-[#3B3B3B] border-[#F17732] font-bold pb-1.5' : 'text-[#616161] border-transparent font-normal'} 
                            text-[16px] w-fit`}
                        >{item}</li>
                    ))}
                </ul>
                <ul className="flex flex-col gap-3">
                    {footerL.map((item, idx) => (
                        <li
                            key={idx}
                            className={`
                            border-0 border-b-2 border-solid 
                            ${idx === 0 ? 'text-[#3B3B3B] border-[#F17732] font-bold pb-1.5' : 'text-[#616161] border-transparent font-normal'} 
                            text-[16px] w-fit`}
                        >{item}</li>
                    ))}
                </ul>

                {/* Left */}
                <div className="flex flex-col justify-center gap-[50px]">
                    <p className="text-[#3B3B3B] w-fit text-[16px] border-[#F17732] font-bold border-0 border-b-2 border-solid pb-1.5">
                        همراه با ما باشید:
                    </p>
                    <ul className="flex items-center gap-[15px]">
                        {socialMedias.map((item, idx) => (
                            <li
                                key={idx}
                                className="p-2.5 bg-[#EAECFA] rounded-full w-fit"
                            >
                                <Link
                                    href='/'
                                    className="min-h-fit"
                                >
                                    {item}
                                </Link>
                            </li>
                        ))}
                    </ul>
                </div>
            </div>
        </div>
    )
}

export default Footer