import { get } from "libs/http";
import useGet from "libs/hooks/useGet";
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 get(`/api/list`);

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

export default Home;