import CircularLoading from "@/app/component/loading/Circular"
import LinkedinB from "@/components/icons/LinkedinB"
import TelegramB from "@/components/icons/TelegramB"
import WhatsappB from "@/components/icons/WhatsappB"

const socials = [
    <WhatsappB />,
    <TelegramB />,
    <LinkedinB />
]

function SocialMedia({ loading }) {
    return (
        <ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
            {socials.map((item, idx) => (
                <CircularLoading width={36} height={36} loading={loading}>
                    <li
                        key={idx}
                        className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
                    >
                        {item}
                    </li>
                </CircularLoading>
            ))}
            <span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
        </ul>
    )
}

export default SocialMedia