import Head from "next/head";
import Container from "@mui/material/Container";
import { Stack } from "@mui/material";
import { DividerBox } from "@/components/base/boxes";
import { useCallback, useEffect, useState } from "react";

export default function Home() {
  const [data, setData] = useState(0)
  const update = useCallback(

    (async () => {
      const res=  (await ((await fetch('https://banned-historical-archives-nextjs-hf-spaces.hf.space/api/get_file_list')).json()))
      setData(res.file_list[0]);
    }), []
  )
  useEffect(() => {
    update()
  }, [])
  return (
    <>
      <Head>
        <title>nextjs-docker-starter</title>
        <link rel="icon" href="/favicon.ico" />
        <meta name="description" content="Next.js in Docker on 🤗 Spaces" />
      </Head>

      <Container component="main" sx={{ minHeight: "90vh" }}>
        <Stack spacing={4} useFlexGap>
          <button style={{color: 'red'}} onClick={update}>{data}</button>

        </Stack>
      </Container>

    </>
  );
}
