"use client";

import { FC, useEffect, useState } from "react";
import { Home as HomeInternal } from "leafcutter-common";
import { fetchLeafcutter } from "@/app/_lib/utils";
import ClientOnly from "@/app/(main)/_components/ClientOnly";

export const Home: FC = () => {
  const [visualizations, setVisualizations] = useState([]);

  useEffect(() => {
    const getVisualizations = async () => {
      const visualizations = await fetchLeafcutter(
        "https://macmini.tiger-agama.ts.net:3001/api/visualizations/list",
        {},
      );
      if (visualizations) {
        setVisualizations(visualizations);
      }
    };

    getVisualizations();
  }, []);

  return (
    <ClientOnly>
      <HomeInternal visualizations={visualizations} />
    </ClientOnly>
  );
};