import { WebSettingContext } from "@/context/webSettingContext";
import FacebookIcon from "@/public/icons/FacebookIcon";
import InstagramIcon from "@/public/icons/InstagramIcon";
import LinkedinIcon from "@/public/icons/LinkedinIcon";
import PlayStoreIcon from "@/public/icons/PlayStoreIcon";
import TwitterIcon from "@/public/icons/TwitterIcon";
import WhatsAppIcon from "@/public/icons/WhatsAppIcon";
import YoutubeIcon from "@/public/icons/YoutubeIcon";
import fetcher from "@/utils/fetcher";
import Link from "next/link";
import { useContext } from "react";
import { FaFacebookSquare, FaInstagram, FaInstagramSquare, FaTwitterSquare } from "react-icons/fa";
import useSWR from "swr";

type SocialMediaLinks = {
  fb: string;
  tw: string;
  linkd: string;
  google: null;
  in: string;
  pin: string;
  vimo: string;
  youtube: string;
  flickr: string;
  vk: string;
  whats_app: string;
  menu_lavel: string;
  slug: string;
  link_url: null | string;
};

const Socials = () => {
  const {
    data: webSettingData,
    error: webSettingError,
    isLoading: webSettingLoading,
  } = useContext(WebSettingContext);


  const {
    data,
    error,
    isLoading,
  }: { data: SocialMediaLinks; error: any; isLoading: boolean } = useSWR(
    "/page-link",
    fetcher
  );
  // console.log(data,"Social")

  // data destructed from link
  const { fb, linkd, tw, youtube, social_link } = webSettingData || {};

  return (
    <>
      {social_link?.fb && (
        <Link className="group" href={social_link.fb} aria-label="facebook" target="_blank">
          <div className="w-8 h-8 flex justify-start items-center pr-5 rounded-sm group-hover:border-black duration-500 ease-out">
            <div className="text-[#1877F2]">
              <FaFacebookSquare />
            </div>
          </div>
        </Link>
      )}
      {social_link?.tw && (
        <Link className="group" href={social_link.tw} target="_blank" aria-label="twitter">
          <div className="w-8 h-8 flex justify-start items-center pr-0 rounded-sm group-hover:border-black duration-500 ease-out">
            {/* <div className="text-black "> */}
            <TwitterIcon />
            {/* </div> */}
          </div>
        </Link>
      )}
      {social_link?.youtube && (
        <Link className="group" href={social_link.youtube} aria-label="youtube">
          <div className="w-8 h-8 flex justify-center items-center mr-2 rounded-sm group-hover:border-black duration-500 ease-out">
            <div className="text-[#FF0000] ">
            <YoutubeIcon />
            </div>
          </div>
        </Link>
      )}
      {social_link?.linkd && (
        <Link className="group" href={social_link.linkd} aria-label="linkedin" target="_blank">
          <div className="w-8 h-8 flex justify-center items-center mr-2 rounded-sm group-hover:border-black duration-500 ease-out">
            <div className="text-[#0A66C2]">
            <LinkedinIcon />
            </div>
          </div>
        </Link>
      )}
      {social_link?.google && (
        <Link className="group" href={social_link.google} aria-label="playstore">
          <div className="w-8 h-8 flex justify-center items-center rounded-sm group-hover:border-black duration-500 ease-out">
            <div className="text-[#3DDC84]">
            <PlayStoreIcon />
            </div>
          </div>
        </Link>
      )}
      {social_link?.in && (
        <Link className="group" href={social_link.in} aria-label="instagram">
          <div className="w-8 h-8 flex justify-center items-center rounded-sm group-hover:border-black duration-500 ease-out">
            <div className="text-white bg-gradient-to-tr from-[#f58529] via-[#dd2a7b] to-[#515bd4] rounded-sm ">
            <FaInstagram />
            </div>
          </div>
        </Link>
      )}

    </>
  );
};

export default Socials;