import useGet from "../utils/hooks/useGet";
import type { ListItem } from "../types/http";
import NovelItem from "../components/NovelItem";

const Home = () => {
  const { data } = useGet<ListItem[]>("/api/list");

  return (
    <main className="container">
      <h2 className="novel-title">Popular This Week</h2>
      <ul className="novel-list">
        {(data?.data || []).map((item) => (
          <NovelItem
            key={item.uri}
            slug={item.uri}
            img={item.img}
            name={item.name}
          />
        ))}
      </ul>
    </main>
  );
};

export async function getServerSideProps() {
  const data = await fetch(`https://novels.yergoo.com/api/list`).then((res) =>
    res.json()
  );

  return {
    props: {
      fallback: {
        "/api/list": data,
      },
    },
  };
}

export default Home;