import React, { useEffect, useState } from "react";
import Link from "next/link";
import axios from "axios";

export default function MenuList({ componentName = "MenuList" }) {
  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: componentName },
        });
        setData(res.data.data);
      } catch (err) {
        setError(`获取${componentName}数据失败`);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [componentName]);

  if (loading) return null;
  if (error) return null;
  if (!data) return null;

  return (
    <div className="widget text-left">
      <h4 className="widget-title !mb-[.75rem] !text-[.95rem] !leading-[1.45] !text-[#333333]">
        {data.title}
      </h4>
      <ul className="pl-0 list-none text-inherit !mb-0">
        {data.items?.map((elm, i) => (
          <li key={i} className={i !== 0 ? "!mt-[0.35rem]" : ""}>
            <Link className="!text-[#333333] hover:!text-[#22b573]" href={elm.item_link || "#"}>
              {elm.item_title}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
} 