import Image from "next/image";

import CardsSvg from "@/images/cards.svg";
import { fetchSpaceRandomly } from "@/utils/network";
import { Shuffler } from "@/components/shuffler";

export default async function Home() {
  const space = await fetchSpaceRandomly();
  const nextSpace = await fetchSpaceRandomly();

  return (
    <main className="flex min-h-screen flex-col items-center justify-start lg:justify-start p-8 pt-16 lg:p-24 lg:pt-44">
      <div className="w-full max-w-xl mx-auto grid gap-16 lg:gap-24 grid-cols-1">
        <header className="grid grid-cols-1 gap-5">
          <h1 className="relative font-sans text-center text-4xl lg:text-7xl font-extrabold max-w-max mx-auto text-transparent bg-clip-text bg-flashy">
            Space Shuffler
            <Image
              src={CardsSvg}
              alt="Cards"
              width={70}
              height={70}
              className="w-10 lg:w-14 absolute -right-9 lg:-right-12 -top-5 lg:-top-6 -rotate-6"
            />
          </h1>
          <h2 className="font-serif text-white/60 text-lg lg:text-2xl text-center">
            Find hidden gems from 180k Spaces
          </h2>
        </header>
        <Shuffler space={space} nextSpace={nextSpace} />
      </div>
    </main>
  );
}