"use client";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import type { Lobby } from "@/server/db/schema";
import { DialogDescription } from "@radix-ui/react-dialog";
import React from "react";
import LobbyForm from "./lobby-form";
import DeleteLobbyDialog from "./delete-lobby-dialog";
import { Settings } from "lucide-react";

function LobbySettingsDialog({ lobby }: { lobby: Lobby }) {
  const [open, setOpen] = React.useState(false);
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant={"ghost"} size={"icon"}>
          <Settings className="size-4" />
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogTitle>Lobby Settings</DialogTitle>
        <DialogDescription></DialogDescription>

        <LobbyForm cb={() => setOpen(false)} server_lobby={lobby} />
        <div className="mt-20 flex items-center">
          <div className="bg-muted-foreground h-px w-12" />
          <p className="relative z-10 px-2 text-xs">Danger Zone</p>
          <div className="bg-muted-foreground h-px grow" />
        </div>

        <DeleteLobbyDialog lobbyId={lobby.id} />
      </DialogContent>
    </Dialog>
  );
}

export default LobbySettingsDialog;
