import { Facebook, Instagram, Linkedin, Youtube } from "lucide-react";

const socials = [
  { label: "Facebook", href: "https://www.facebook.com/fcjgroup/", Icon: Facebook },
  { label: "LinkedIn", href: "https://www.linkedin.com/company/fcgroupbr", Icon: Linkedin },
  { label: "Instagram", href: "https://www.instagram.com/fcjgroupbr/", Icon: Instagram },
  { label: "YouTube", href: "https://youtube.com/fcjventurebuilder", Icon: Youtube },
];

export function SocialLinks({ className = "" }: { className?: string }) {
  return (
    <div className={`flex items-center gap-3 ${className}`}>
      {socials.map(({ label, href, Icon }) => (
        <a
          key={label}
          href={href}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={label}
          title={label}
          className="flex h-9 w-9 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:border-primary hover:text-primary"
        >
          <Icon size={17} />
        </a>
      ))}
    </div>
  );
}