import { type FC, type ReactNode } from "react";

type SocialLink = {
  label: string;
  href: string;
  bg: string;
  icon: ReactNode;
};

const socialLinks: SocialLink[] = [
  {
    label: "Facebook",
    href: "#",
    bg: "bg-[#1877F2]",
    icon: (
      <svg viewBox="0 0 24 24" className="size-4 fill-white" aria-hidden>
        <path d="M14 8.5h2.5V5.2C16.1 5.1 15 5 13.8 5 11.4 5 9.8 6.5 9.8 9.2V12H7v3.5h2.8V23h3.5v-7.5H16l.5-3.5h-3.2V9.4c0-1 .3-1.9 1.7-1.9z" />
      </svg>
    ),
  },
  {
    label: "Instagram",
    href: "#",
    bg: "bg-linear-to-br from-[#F58529] via-[#DD2A7B] to-[#8134AF]",
    icon: (
      <svg viewBox="0 0 24 24" className="size-4 fill-white" aria-hidden>
        <path d="M12 7.2A4.8 4.8 0 1 0 12 16.8 4.8 4.8 0 1 0 12 7.2zm0 7.9a3.1 3.1 0 1 1 0-6.2 3.1 3.1 0 0 1 0 6.2zm6.3-8.1a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0zM12 3.5c-2.3 0-2.6 0-3.5.1-2.3.1-3.4 1.2-3.5 3.5-.1.9-.1 1.2-.1 3.5s0 2.6.1 3.5c.1 2.3 1.2 3.4 3.5 3.5.9.1 1.2.1 3.5.1s2.6 0 3.5-.1c2.3-.1 3.4-1.2 3.5-3.5.1-.9.1-1.2.1-3.5s0-2.6-.1-3.5c-.1-2.3-1.2-3.4-3.5-3.5-.9-.1-1.2-.1-3.5-.1zm0 1.5c2.3 0 2.5 0 3.4.1 1.8.1 2.6.9 2.7 2.7.1.9.1 1.1.1 3.4s0 2.5-.1 3.4c-.1 1.8-.9 2.6-2.7 2.7-.9.1-1.1.1-3.4.1s-2.5 0-3.4-.1c-1.8-.1-2.6-.9-2.7-2.7-.1-.9-.1-1.1-.1-3.4s0-2.5.1-3.4c.1-1.8.9-2.6 2.7-2.7.9-.1 1.1-.1 3.4-.1z" />
      </svg>
    ),
  },
  {
    label: "LinkedIn",
    href: "#",
    bg: "bg-[#0A66C2]",
    icon: (
      <svg viewBox="0 0 24 24" className="size-4 fill-white" aria-hidden>
        <path d="M6.5 9.5H3.8V20h2.7V9.5zM5.1 4a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2zM20.2 20h-2.7v-5.5c0-1.3 0-3-1.8-3s-2.1 1.4-2.1 2.9V20H11V9.5h2.6v1.4h.1c.4-.7 1.3-1.5 2.7-1.5 2.9 0 3.4 1.9 3.4 4.4V20z" />
      </svg>
    ),
  },
  {
    label: "Telegram",
    href: "#",
    bg: "bg-[#2AABEE]",
    icon: (
      <svg viewBox="0 0 24 24" className="size-4 fill-white" aria-hidden>
        <path d="M9.8 15.3 9.5 19c.4 0 .6-.2.8-.4l2-1.9 4.1 3c.8.4 1.3.2 1.5-.7l2.7-12.7c.2-1.1-.4-1.5-1.2-1.2L4.2 10.3c-1 .3-1 .9-.2 1.2l4.4 1.4 10.2-6.4c.5-.3.9-.1.5.2L9.8 15.3z" />
      </svg>
    ),
  },
  {
    label: "WhatsApp",
    href: "#",
    bg: "bg-[#25D366]",
    icon: (
      <svg viewBox="0 0 24 24" className="size-4 fill-white" aria-hidden>
        <path d="M12 3.5A8.4 8.4 0 0 0 5.2 16.3L4 20l3.8-1.2A8.4 8.4 0 1 0 12 3.5zm4.9 12c-.2.6-1.2 1.1-1.7 1.1-.4 0-.9.2-3-.8-2.5-1.2-4.1-4-4.2-4.2-.1-.2-1-1.4-1-2.6s.6-1.9.9-2.1c.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .5.4l.8 1.9c.1.2 0 .4-.1.5l-.3.4c-.1.2-.3.3-.1.6.2.3.7 1.2 1.6 1.9 1.1.9 2 1.2 2.3 1.3.3.1.5.1.7-.1l.6-.7c.2-.2.4-.2.6-.1l1.8.8c.2.1.4.2.4.4 0 .2 0 1.2-.5 1.8z" />
      </svg>
    ),
  },
];

const FooterSocial: FC = () => {
  return (
    <div className="flex flex-col gap-4 items-center lg:items-start text-center lg:text-right">
      <h3 className="text-sm font-bold text-[#0A1B2C]">ما را در شبکه‌های اجتماعی دنبال کنید</h3>
      <div className="flex items-center gap-3 flex-wrap justify-center lg:justify-start">
        {socialLinks.map((item) => (
          <a key={item.label} href={item.href} aria-label={item.label} className={`flex size-9 items-center justify-center rounded-full ${item.bg}`}>
            {item.icon}
          </a>
        ))}
      </div>
    </div>
  );
};

export default FooterSocial;