Dialog with Privacy Toggle

'use client';

import { useState } from 'react';

import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';

export default function Dialog06() {
  const [open, setOpen] = useState(true);

  return (
    <Dialog onOpenChange={setOpen} open={open}>
      <DialogTrigger render={<Button onClick={() => setOpen(true)} />}>
        Create Workspace
      </DialogTrigger>
      <DialogContent className="p-0 sm:max-w-lg">
        <DialogHeader className="px-6 pt-4">
          <DialogTitle className="text-balance font-semibold text-foreground text-lg">
            Create workspace
          </DialogTitle>
          <DialogDescription className="mt-2 text-pretty text-muted-foreground text-sm leading-6">
            Workspaces are shared environments where teams can connect to data
            sources, run queries and create reports.
          </DialogDescription>
        </DialogHeader>

        <form action="#" method="POST">
          <div className="px-6 pb-4">
            <Label className="font-medium text-sm" htmlFor="workspace-name">
              Workspace Name<span className="text-destructive">*</span>
            </Label>
            <Input
              className="mt-2"
              id="workspace-name"
              name="workspace-name"
              placeholder="My workspace"
              required
              type="text"
            />
            <Button className="mt-4 w-full" type="submit">
              Create workspace
            </Button>
          </div>
          <div className="rounded-b-md border-t bg-muted px-6 py-4">
            <div className="flex items-start space-x-3">
              <div className="mt-1 pt-0.5">
                <Switch
                  id="enable-private-workspace"
                  name="enable-private-workspace"
                />
              </div>
              <div>
                <Label
                  className="font-medium text-sm"
                  htmlFor="enable-private-workspace"
                >
                  Set workspace to private
                </Label>
                <p className="text-pretty text-muted-foreground text-sm">
                  Only those invited can access or view
                </p>
              </div>
            </div>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}