Dialog

import { Button } from "@moodinary/ui/components/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
} from "@moodinary/ui/components/dialog";
import { Input } from "@moodinary/ui/components/input";
import { Label } from "@moodinary/ui/components/label";
import { useCallback, useState } from "react";

export default function CreateTeam() {
	const [open, setOpen] = useState(false);
	const [name, setName] = useState("");
	const close = useCallback(() => setOpen(false), []);
	const show = useCallback(() => setOpen(true), []);
	const submit = useCallback(
		(event: React.FormEvent) => {
			event.preventDefault();
			setName("");
			close();
		},
		[close]
	);
	return (
		<>
			<Button onClick={show}>Nuevo equipo</Button>
			<Dialog onOpenChange={setOpen} open={open}>
				<DialogContent>
					<DialogHeader>
						<DialogTitle>Nuevo equipo</DialogTitle>
						<DialogDescription>
							Los equipos agrupan miembros para capturar pulsos con contexto
							(área, proyecto, sede).
						</DialogDescription>
					</DialogHeader>
					<form className="space-y-4" onSubmit={submit}>
						<div className="space-y-2">
							<Label htmlFor="team-name">Nombre</Label>
							<Input
								autoFocus
								id="team-name"
								maxLength={80}
								onChange={(event) => setName(event.target.value)}
								placeholder="Equipo A"
								required
								value={name}
							/>
						</div>
						<DialogFooter>
							<Button onClick={close} type="button" variant="secondary">
								Cancelar
							</Button>
							<Button disabled={!name.trim()} type="submit">
								Crear equipo
							</Button>
						</DialogFooter>
					</form>
				</DialogContent>
			</Dialog>
		</>
	);
}