Dropdown menu and Popover

"use client";

import {
  Avatar,
  Badge,
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuHeader,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
  Popover,
  PopoverContent,
  PopoverHeader,
  PopoverTrigger,
} from "@waveinno/ui";
import {
  Banknote,
  CalendarClock,
  Car,
  ChevronDown,
  Command,
  CreditCard,
  DoorOpen,
  FileUp,
  Info,
  Keyboard,
  LogOut,
  Plus,
  Search,
  Settings,
  Sparkles,
  UserRound,
  Users,
} from "lucide-react";

export default function MenusExample() {
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-2">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button>
              Actions <ChevronDown />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuLabel>Session</DropdownMenuLabel>
            <DropdownMenuItem>View receipt</DropdownMenuItem>
            <DropdownMenuItem>Change plate</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem danger>Void</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

        {/* Rich: icon tiles, descriptions, shortcuts, a badge, a submenu. */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="primary">
              <Plus /> Create <ChevronDown />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-72">
            <DropdownMenuItem icon={<Car />} description="Record a car or bike at the gate" shortcut="N">
              New session
            </DropdownMenuItem>
            <DropdownMenuItem icon={<CalendarClock />} description="Reserve a space for later">
              Booking
            </DropdownMenuItem>
            <DropdownMenuItem icon={<Users />} description="A pass that bills on the 25th" badge={<Badge variant="gradient" dot={false}>Pro</Badge>}>
              Monthly parker
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>
                <FileUp /> Import
              </DropdownMenuSubTrigger>
              <DropdownMenuSubContent>
                <DropdownMenuItem>From CSV</DropdownMenuItem>
                <DropdownMenuItem>From Excel</DropdownMenuItem>
              </DropdownMenuSubContent>
            </DropdownMenuSub>
          </DropdownMenuContent>
        </DropdownMenu>

        {/* Account menu: identity header. */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button type="button" className="cursor-pointer rounded-full">
              <Avatar name="Karim Ahmed" status="online" />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-64">
            <DropdownMenuHeader media={<Avatar name="Karim Ahmed" size="lg" />} title="Karim Ahmed" subtitle="Owner · Gulshan Parking Ltd" />
            <DropdownMenuSeparator />
            <DropdownMenuItem icon={<UserRound />} shortcut="P">
              Profile
            </DropdownMenuItem>
            <DropdownMenuItem icon={<Settings />} shortcut=",">
              Settings
            </DropdownMenuItem>
            <DropdownMenuItem icon={<CreditCard />}>Billing</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem icon={<LogOut />} danger>
              Sign out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="dark">
              <Command /> Dark menu
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent variant="dark" className="w-64">
            <DropdownMenuLabel>Quick actions</DropdownMenuLabel>
            <DropdownMenuItem icon={<Search />} shortcut="⌘K">
              Search everything
            </DropdownMenuItem>
            <DropdownMenuItem icon={<DoorOpen />} shortcut="G">
              Open a gate
            </DropdownMenuItem>
            <DropdownMenuItem icon={<Banknote />} shortcut="C">
              Close cash shift
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      <div className="flex flex-wrap gap-2">
        <Popover>
          <PopoverTrigger asChild>
            <Button>Popover</Button>
          </PopoverTrigger>
          <PopoverContent className="text-sm text-body">Any content, anchored to its trigger.</PopoverContent>
        </Popover>
        <Popover>
          <PopoverTrigger asChild>
            <Button>
              <Info /> With arrow
            </Button>
          </PopoverTrigger>
          <PopoverContent arrow side="top" align="center">
            <PopoverHeader icon={<Info />} title="Grace period" description="Drivers who leave within 10 minutes pay nothing. Set it per vehicle class." />
          </PopoverContent>
        </Popover>
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="dark">Dark tip</Button>
          </PopoverTrigger>
          <PopoverContent variant="dark" arrow align="center" className="w-64">
            <PopoverHeader icon={<Keyboard />} title="Keyboard first" description="Press G to open the gate, C to close the shift, ⌘K to search." />
          </PopoverContent>
        </Popover>
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="gradient">
              <Sparkles /> What&apos;s new
            </Button>
          </PopoverTrigger>
          <PopoverContent variant="brand" arrow align="center" className="w-80">
            <PopoverHeader icon={<Sparkles />} title="Monthly parking is here" description="Sell day and night passes on the same space; bills go out on the 25th." />
            <div className="flex justify-end gap-2">
              <Button variant="glass" size="sm">
                Later
              </Button>
              <Button variant="white" size="sm">
                Show me
              </Button>
            </div>
          </PopoverContent>
        </Popover>
      </div>
    </div>
  );
}