import { get } from "libs/http";
import useGet from "libs/hooks/useGet";
import NovelItem from "components/NovelItem";

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

  if (!data) return null;
  const { completed, on_going, rands } = data.data;
  return (
    <main className="container">
      {rands ? (
        <>
          <h2 className="novel-title">Ranking</h2>
          <ul className="novel-list">
            {rands.map((item) => (
              <NovelItem
                key={item.uri}
                slug={item.uri}
                img={item.img}
                name={item.name}
              />
            ))}
          </ul>
        </>
      ) : null}
      {on_going ? (
        <>
          <h2 className="novel-title">Updating</h2>
          <ul className="novel-list">
            {on_going.map((item) => (
              <NovelItem
                key={item.uri}
                slug={item.uri}
                img={item.img}
                name={item.name}
              />
            ))}
          </ul>
        </>
      ) : null}
      {completed ? (
        <>
          <h2 className="novel-title">Completed</h2>
          <ul className="novel-list">
            {completed.map((item) => (
              <NovelItem
                key={item.uri}
                slug={item.uri}
                img={item.img}
                name={item.name}
              />
            ))}
          </ul>
        </>
      ) : null}
    </main>
  );
};

export async function getServerSideProps() {
  const data = await get(`/api/list`);

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

export default Home;