import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { alovaInstance } from '@/api/index'
import { useRequest } from 'alova/client';
import { DotLoading } from 'antd-mobile'

type TItem = {
    "userId": number,
    "id": number,
    "title": string,
    "body": string
  }

const LandingPage: React.FC = () => {
  const navigate = useNavigate();
  const { loading, data, error, send, update } = useRequest(
    alovaInstance.Get<TItem[]>('https://jsonplaceholder.typicode.com/posts', {
      cacheFor: 0
    }),
    {
      initialData: [], 
      immediate: false 
    }
  )
  const test = async ()=> {
    send()
    // const response = await alovaInstance.Get('https://jsonplaceholder.typicode.com/posts');
    // console.log(response,3333)
  }
  useEffect(()=> {
    test()
  }, [])
  
  if (loading) {
    return <DotLoading />;
  } else if (error) {
    return <div>{error.message}</div>;
  }

  return (
    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-60px)]">
      <div className="text-center p-8">
        <div>{data.map(item => item.title)}</div>
        <h1 className="text-4xl sm:text-5xl font-extrabold text-slate-900 tracking-tight">
          Virtual Identity System
        </h1>
        <p className="mt-4 max-w-xl mx-auto text-lg text-slate-600">
          Your unified, verifiable online presence.
        </p>
        <div className="mt-8 flex flex-col sm:flex-row justify-center gap-4">
          <button
            onClick={() => navigate('/contact')}
            className="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-transform transform hover:scale-105"
          >
            Contact Homepage
          </button>
          <button
            onClick={() => navigate('/edit')}
            className="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3 border border-slate-300 text-base font-medium rounded-md text-slate-700 bg-white hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-transform transform hover:scale-105"
          >
            Certify My Page
          </button>
        </div>
      </div>
    </div>
  );
};

export default LandingPage;