import {ScrollShadow} from "@heroui/react";
import { useEffect, useState } from "react";

export default function Card() {
  // Data
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  
  // Load Data
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('http://localhost:8080/agent/card/你好')
        if (!response.ok) {
          throw new Error('API Error');
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error("Failed to fetch data: ", error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);


  return (
    <div className="w-full p-0 sm:max-w-sm">
      <ScrollShadow className="max-h-[500px] p-10">
        <div className="space-y-4">
{loading ? (
            // 3. 加载状态显示 Loading...
            <p className="text-center text-gray-500">Loading data...</p>
          ) : (
            // 4. 渲染从 API 获取的数据
            <pre>{data?.message}</pre>
          )}
        </div>
      </ScrollShadow>
    </div>
  );
}