import { type SocialLink } from "@/data/site-config";

interface SocialIconsProps {
  links: readonly SocialLink[] | SocialLink[];
  className?: string;
  iconClassName?: string;
}

/**
 * Reusable social icon list.
 * Used in: Footer, ContactFormSection.
 */
export function SocialIcons({
  links,
  className = "",
  iconClassName = "",
}: SocialIconsProps) {
  return (
    <div className={`flex items-center gap-4 ${className}`} role="list">
      {links.map((link) => (
        <a
          key={link.platform}
          href={link.url}
          target="_blank"
          rel="noopener noreferrer"
          role="listitem"
          aria-label={link.platform}
          className={`flex h-10 w-10 items-center justify-center rounded-full border border-tenext-card-border text-tenext-text-muted transition-all duration-300 hover:border-tenext-teal hover:text-tenext-teal ${iconClassName}`}
        >
          <SocialSvg icon={link.icon} />
        </a>
      ))}
    </div>
  );
}

/** Inline SVG icons for each social platform */
function SocialSvg({ icon }: { icon: SocialLink["icon"] }) {
  const size = "h-4 w-4";

  switch (icon) {
    case "facebook":
      return (
        <svg className={size} viewBox="0 0 24 24" fill="currentColor">
          <path d="M9.198 21.5h4v-8.01h3.604l.396-3.98h-4V7.5a1 1 0 0 1 1-1h3v-4h-3a5 5 0 0 0-5 5v2.01h-2l-.396 3.98h2.396v8.01Z" />
        </svg>
      );
    case "x-twitter":
      return (
        <svg className={size} viewBox="0 0 24 24" fill="currentColor">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z" />
        </svg>
      );
    case "linkedin":
      return (
        <svg className={size} viewBox="0 0 24 24" fill="currentColor">
          <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286ZM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065Zm1.782 13.019H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003Z" />
        </svg>
      );
    case "youtube":
      return (
        <svg className={size} viewBox="0 0 24 24" fill="currentColor">
          <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814ZM9.545 15.568V8.432L15.818 12l-6.273 3.568Z" />
        </svg>
      );
  }
}