"use client";

import { useEffect, useState } from "react";

interface SocialLink {
  id: number;
  platform: string;
  url: string;
  icon: string;
  order: number;
  isActive: boolean;
}

interface SocialLinksProps {
  className?: string;
  iconSize?: "sm" | "md" | "lg";
}

export default function SocialLinks({ className = "", iconSize = "md" }: SocialLinksProps) {
  const [socialLinks, setSocialLinks] = useState<SocialLink[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetch("/api/social-links")
      .then((res) => res.json())
      .then((data) => {
        setSocialLinks(data);
        setIsLoading(false);
      })
      .catch(() => {
        setIsLoading(false);
      });
  }, []);

  if (isLoading) {
    return null;
  }

  if (socialLinks.length === 0) {
    return null;
  }

  const getIconSize = () => {
    switch (iconSize) {
      case "sm":
        return "w-4 h-4";
      case "lg":
        return "w-6 h-6";
      default:
        return "w-5 h-5";
    }
  };

  return (
    <div className={`flex gap-6 ${className}`}>
      {socialLinks.map((link) => (
        <a
          key={link.id}
          href={link.url}
          target="_blank"
          rel="noopener noreferrer"
          className="text-gray-300 hover:text-[#B87333] transition-colors transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#B87333]"
          aria-label={link.platform}
        >
          <svg className={getIconSize()} fill="currentColor" viewBox="0 0 24 24">
            <path d={link.icon} />
          </svg>
        </a>
      ))}
    </div>
  );
}
