const socialLinks = [
  {
    href: 'https://www.instagram.com',
    label: 'Instagram',
    icon: (
      <path d="M7.75 2h8.5A5.75 5.75 0 0 1 22 7.75v8.5A5.75 5.75 0 0 1 16.25 22h-8.5A5.75 5.75 0 0 1 2 16.25v-8.5A5.75 5.75 0 0 1 7.75 2Zm0 1.5A4.25 4.25 0 0 0 3.5 7.75v8.5A4.25 4.25 0 0 0 7.75 20.5h8.5a4.25 4.25 0 0 0 4.25-4.25v-8.5a4.25 4.25 0 0 0-4.25-4.25h-8.5Zm9.5 1.75a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 1.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z" />
    ),
  },
  {
    href: 'https://www.linkedin.com',
    label: 'LinkedIn',
    icon: (
      <path d="M6.94 8.5A1.56 1.56 0 1 1 6.94 5.4a1.56 1.56 0 0 1 0 3.1ZM5.5 10h2.88v8.5H5.5V10Zm4.63 0H12.9v1.16h.04c.39-.74 1.35-1.52 2.79-1.52 2.99 0 3.54 1.97 3.54 4.53v4.33h-2.88V14.66c0-.91-.02-2.07-1.26-2.07-1.27 0-1.46.99-1.46 2.01v3.9h-2.88V10Z" />
    ),
  },
  {
    href: 'https://x.com',
    label: 'X',
    icon: (
      <path d="M18.9 2H22l-6.77 7.74L23 22h-6.1l-4.78-6.26L6.63 22H3.5l7.25-8.28L1 2h6.26l4.32 5.7L18.9 2Zm-1.07 18h1.69L6.34 3.9H4.53L17.83 20Z" />
    ),
  },
] as const

interface SocialMediaLinksProps {
  className?: string
  iconClassName?: string
  linkClassName?: string
}

export default function SocialMediaLinks({
  className = '',
  iconClassName = 'h-5 w-5',
  linkClassName = 'transition-colors hover:text-[#4274ff]',
}: SocialMediaLinksProps) {
  return (
    <div className={`flex items-center gap-4 ${className}`.trim()}>
      {socialLinks.map((link) => (
        <a
          key={link.label}
          href={link.href}
          className={linkClassName}
          aria-label={link.label}
          target="_blank"
          rel="noopener noreferrer"
        >
          <svg className={iconClassName} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            {link.icon}
          </svg>
        </a>
      ))}
    </div>
  )
}