Dialog and Sheet

"use client";

import {
  Button,
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  Input,
  Label,
  Switch,
  Sheet,
  SheetContent,
  SheetDescription,
  SheetTitle,
  SheetTrigger,
} from "@waveinno/ui";
import { Tag } from "lucide-react";

export default function DialogExample() {
  return (
    <div className="flex flex-wrap gap-2">
      <Dialog>
        <DialogTrigger asChild>
          <Button>Open drawer dialog</Button>
        </DialogTrigger>
        <DialogContent size="md">
          <DialogHeader icon={<Tag />} eyebrow="Rate plan · Gulshan">
            <DialogTitle>Edit car rates</DialogTitle>
            <DialogDescription>Changes apply to new sessions only. Vehicles inside keep their rate.</DialogDescription>
          </DialogHeader>
          <DialogBody className="space-y-4">
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label htmlFor="d-first">First hour (৳)</Label>
                <Input id="d-first" defaultValue="60" />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="d-next">Each next hour (৳)</Label>
                <Input id="d-next" defaultValue="40" />
              </div>
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="d-cap">Daily cap (৳)</Label>
              <Input id="d-cap" defaultValue="400" />
            </div>
            <label className="flex items-center justify-between rounded-ctl border border-border p-3 text-[13px] text-body">
              Grace period of 10 minutes <Switch defaultChecked />
            </label>
            {Array.from({ length: 6 }, (_, i) => (
              <p key={i} className="text-[13px] leading-relaxed text-muted">
                Long forms scroll under the frosted footer; the actions never leave the screen.
              </p>
            ))}
          </DialogBody>
          <DialogFooter className="justify-between">
            <Button variant="ghost">Preview receipt</Button>
            <div className="flex gap-2">
              <Button>Cancel</Button>
              <Button variant="primary">Publish v7</Button>
            </div>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      <Dialog>
        <DialogTrigger asChild>
          <Button>Open centred dialog</Button>
        </DialogTrigger>
        <DialogContent variant="center" width="max-w-[420px]">
          <DialogHeader>
            <DialogTitle>Delete this rate?</DialogTitle>
            <DialogDescription>This cannot be undone.</DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="danger">Delete</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      <Sheet>
        <SheetTrigger asChild>
          <Button>Open sheet</Button>
        </SheetTrigger>
        <SheetContent>
          <div className="p-5">
            <SheetTitle className="text-base font-semibold text-text">Sheet</SheetTitle>
            <SheetDescription className="mt-1 text-sm text-muted">Side panel for details and forms.</SheetDescription>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  );
}