"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import { Icons } from "@/components/icons";
import { cn } from "@/lib/utils";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import LobbyForm from "./lobby-form";

function CreateLobbyDialog({ className }: { className?: string }) {
  const [open, setOpen] = React.useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button
          size={"xxl"}
          variant={"party"}
          className={cn(
            "text-shadow-primary text-primary-foreground font-black",
            className,
          )}
        >
          <>
            <Icons.logo className="size-6" />
            Create Lobby
          </>
        </Button>
      </DialogTrigger>

      <DialogContent className="container-bg bg-background/10">
        <DialogHeader>
          <DialogTitle className="text-shadow-primary text-4xl font-black uppercase">
            Create Lobby
          </DialogTitle>
          <DialogDescription></DialogDescription>
        </DialogHeader>
        <LobbyForm cb={() => setOpen(false)} />
      </DialogContent>
    </Dialog>
  );
}

export default CreateLobbyDialog;