import { Space } from "@/components/space";
import { SpaceIcon } from "@/components/space_icon";
import { fetchAllPages } from "@/utils";
import { SpaceProps } from "@/utils/type";

async function getSpaces() {
  try {
    const response = await fetchAllPages();
    return response as SpaceProps[];
  } catch {
    return [];
  }
}

export default async function Home() {
  const spaces = await getSpaces();
  console.log(spaces);
  return (
    <section className="flex h-screen overflow-auto">
      <div className="w-full container px-6 py-10 lg:py-20 mx-auto space-y-14">
        <header className="max-w-4xl mx-auto w-full text-center">
          <div className="mb-6 mx-auto font-regular text-xs text-center max-w-max rounded-full border-gray-200 bg-gray-50 border text-gray-700 px-3 py-2 transition-all duration-300">
            <SpaceIcon className="inline-block w-4 h-4 mr-2 drop-shadow-lg" />
            Browse {spaces.length} spaces
          </div>
          <h1 className="font-extrabold text-3xl text-black">
            Zero GPU Spaces
          </h1>
          <p className="text-neutral-500 font-regular text-base">
            Discover spaces with zero GPU usage on 🤗 Hugging Face Spaces.
          </p>
        </header>
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
          {spaces?.map((space: SpaceProps) => (
            <Space key={space.id} space={space} />
          ))}
        </div>
      </div>
    </section>
  );
}