import React, { useEffect, useState } from "react";
import axios from "axios";

export default function SocialLinks() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const res = await axios.get("/api/get-component-data", {
          params: { component_name: "SocialLinks" },
        });
        setData(res.data.data);
      } catch (err) {
        setError("获取SocialLinks数据失败");
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  if (loading) return null;
  if (error) return null;
  if (!data || !Array.isArray(data.items) || !data.items.length) return null;

  return (
    <nav className="nav social">
      {data.items.map((elm, i) => (
        <a
          key={i}
          className={`!text-[${elm.item_color||'#cacaca'}] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]`}
          href={elm.item_link}
          target="_blank"
          rel="noopener noreferrer"
        >
          <i
            className={`uil ${elm.item_subtitle||''} before:content-[${elm.item_description||''}] !text-[${elm.item_color||'#cacaca'}] text-[1rem]`}
          />
        </a>
      ))}
    </nav>
  );
}