import type { JSXElement } from "solid-js";
import { lazy } from "solid-js";
import { ColorModeProvider, ColorModeScript } from "@kobalte/core";
import {
  Tabs,
  TabsContent,
  TabsIndicator,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";
import Home from "@/pages/Home";
import Footer from "@/components/Footer";
import { Websocket } from "./components/Websocket";

const Browser = lazy(() => import("@/pages/Browser"));
const Game = lazy(() => import("@/pages/Game"));

export default function App(): JSXElement {
  return (
    <>
      <ColorModeScript />
      <ColorModeProvider>
        <div class="lg:container m-auto relative">
          <div class="transition-all p-1 lg:p-5 lg:rounded-2xl lg:shadow-xl min-h-screen lg:min-h-0 dark:bg-black">
            <h1 class="text-4xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tighter">
              Cards For Humanity
            </h1>
            <br />
            <Websocket />
            <Tabs defaultValue="home">
              <TabsList>
                <TabsTrigger value="home">Home</TabsTrigger>
                <TabsTrigger value="browser">Browser</TabsTrigger>
                <TabsTrigger value="game">Game</TabsTrigger>
                <TabsIndicator variant="underline" />
              </TabsList>
              <TabsContent value="home">
                <Home />
              </TabsContent>
              <TabsContent value="browser">
                <Browser />
              </TabsContent>
              <TabsContent value="game">
                <Game />
              </TabsContent>
            </Tabs>
            <Footer />
          </div>
        </div>
      </ColorModeProvider>
    </>
  );
}