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

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

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

  const item = data.items?.[0] || {};

  return (
    <div className="widget">
      <h4 className="widget-title !mb-[.75rem] !text-[.95rem] !leading-[1.45] !text-white">
        {data.title}
      </h4>
      {data.description && (
        <address className="not-italic !leading-[inherit] !mb-4">
          {data.description}
        </address>
      )}
      {data.p1 && (
        <>
          {data.p1}
        </>
      )}      
      {data.p2 && (
        <>
          <br/>
          {data.p2}
        </>
      )}
      {data.p3 && (
        <>
          <br/>
          {data.p3}
        </>
      )}      
    </div>
  );
}