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;