import { IoLogoInstagram } from "react-icons/io5";
import { FaXTwitter } from "react-icons/fa6";
import { FaYoutube, FaLinkedinIn, FaFacebookF } from "react-icons/fa";

export default function SocialIcons({ siteInfo }) {
  const iconStyle =
    "w-9 h-9 flex items-center border justify-center rounded-full bg-gray-100 text-gray-700 transition-all duration-300 hover:scale-110 hover:shadow-lg";

  return (
    <div className="connect-with-us">
      <ul className="flex items-center gap-3">

        {siteInfo?.facebook && (
          <li>
            <a
              href={siteInfo.facebook}
              target="_blank"
              rel="noopener noreferrer"
              className={`${iconStyle} hover:bg-[#1877F2] hover:text-white`}
            >
              <FaFacebookF size={15} />
            </a>
          </li>
        )}

        {siteInfo?.twitter && (
          <li>
            <a
              href={siteInfo.twitter}
              target="_blank"
              rel="noopener noreferrer"
              className={`${iconStyle} hover:bg-black hover:text-white`}
            >
              <FaXTwitter size={15} />
            </a>
          </li>
        )}

        {siteInfo?.instagram && (
          <li>
            <a
              href={siteInfo.instagram}
              target="_blank"
              rel="noopener noreferrer"
              className={`${iconStyle} hover:bg-gradient-to-r hover:from-pink-500 hover:to-yellow-500 hover:text-white`}
            >
              <IoLogoInstagram size={16} />
            </a>
          </li>
        )}

        {siteInfo?.linkedin && (
          <li>
            <a
              href={siteInfo.linkedin}
              target="_blank"
              rel="noopener noreferrer"
              className={`${iconStyle} hover:bg-[#0A66C2] hover:text-white`}
            >
              <FaLinkedinIn size={15} />
            </a>
          </li>
        )}

        {siteInfo?.youtube && (
          <li>
            <a
              href={siteInfo.youtube}
              target="_blank"
              rel="noopener noreferrer"
              className={`${iconStyle} hover:bg-[#FF0000] hover:text-white`}
            >
              <FaYoutube size={16} />
            </a>
          </li>
        )}

      </ul>
    </div>
  );
}