"use client";

import CreateGame from "@/components/home/CreateGame";
import JoinGame from "@/components/home/JoinGame";
import PublicGames from "@/components/home/PublicGames/PublicGames";
import Link from "next/link";
import { useSession } from "@/context/session";

export const revalidate = 0;

export default function Home() {
  const { user } = useSession();

  return (
    <div className="flex w-full flex-wrap items-start justify-center gap-8 px-4 py-10 lg:gap-16">
      <PublicGames />

      <div className="flex flex-col items-center gap-4">

        {/* Against AI */}
        <div className="flex flex-col items-center">
          <h2 className="mb-4 text-xl font-bold leading-tight">Gegen KI spielen</h2>
          <Link href="/ai" className="btn btn-primary w-full max-w-xs">
            ♟ Gegen Stockfish spielen
          </Link>
        </div>

        <div className="divider divider-vertical">oder</div>

        {/* Friends */}
        {user?.id && typeof user.id === "number" && (
          <>
            <div className="flex flex-col items-center">
              <h2 className="mb-4 text-xl font-bold leading-tight">Freunde</h2>
              <Link href="/friends" className="btn btn-outline w-full max-w-xs">
                👥 Freunde verwalten
              </Link>
            </div>
            <div className="divider divider-vertical">oder</div>
          </>
        )}

        <div className="flex flex-col items-center">
          <h2 className="mb-4 text-xl font-bold leading-tight">Per Einladung beitreten</h2>
          <JoinGame />
        </div>

        <div className="divider divider-vertical">oder</div>

        <div className="flex flex-col items-center">
          <h2 className="mb-4 text-xl font-bold leading-tight">Spiel erstellen</h2>
          <CreateGame />
        </div>
      </div>
    </div>
  );
}