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() {
    return (
        <ul className="flex mt-[8px] pb-[32px] relative items-center justify-end gap-4">
            {socials.map((item, idx) => (
                <li
                    key={idx}
                    className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
                >
                    {item}
                </li>
            ))}
            <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