import { IoLogoFacebook, IoLogoInstagram, IoLogoYoutube } from "react-icons/io5";
import { iconButtonClass } from "@/components/IconButton";

const socials = [
  {
    label: "Facebook",
    href: "https://www.facebook.com/trptk/",
    Icon: IoLogoFacebook,
  },
  {
    label: "Instagram",
    href: "https://www.instagram.com/trptk_official/",
    Icon: IoLogoInstagram,
  },
  {
    label: "YouTube",
    href: "https://www.youtube.com/user/trptkmusic",
    Icon: IoLogoYoutube,
  },
];

export function SocialButtons() {
  return (
    <div className="flex gap-3 text-lg">
      {socials.map(({ label, href, Icon }) => (
        <a
          key={label}
          href={href}
          target="_blank"
          rel="noreferrer"
          aria-label={label}
          className={`${iconButtonClass} inline-flex items-center justify-center leading-none`}
        >
          <Icon className="block" />
        </a>
      ))}
    </div>
  );
}