Menu

"use client";

import { Badge, Menu, MenuGroup, MenuItem, MenuSub, type MenuLook } from "@waveinno/ui";
import { Car, DoorOpen, LayoutDashboard, Plus, Settings, Users, Wallet } from "lucide-react";

const LOOKS: { look: MenuLook; when: string }[] = [
  { look: "soft", when: "Default — settings, panels" },
  { look: "line", when: "Long lists, docs, drawers" },
  { look: "raised", when: "Side panels on a page" },
  { look: "gradient", when: "The main menu of a page" },
  { look: "dark", when: "Command areas, over media" },
];

export default function LooksDemo() {
  return (
    <div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
      {LOOKS.map(({ look, when }) => (
        <div key={look}>
          <p className="mb-2 text-[11.5px] text-muted">
            <span className="font-semibold text-text">{look}</span> · {when}
          </p>
          <Menu variant={look} defaultValue="sessions" aria-label={`${look} menu`} className="max-w-[260px]">
            <MenuGroup label="Workspace" action={<Plus className="size-3.5 text-muted" aria-hidden />}>
              <MenuItem value="overview" icon={<LayoutDashboard />}>
                Overview
              </MenuItem>
              <MenuItem value="sessions" icon={<Car />} count={12}>
                Live sessions
              </MenuItem>
              <MenuItem value="gates" icon={<DoorOpen />} shortcut="G">
                Gates
              </MenuItem>
              <MenuSub label="Payments" icon={<Wallet />}>
                <MenuItem value="cash">Cash shifts</MenuItem>
                <MenuItem value="bkash">bKash</MenuItem>
                <MenuItem
                  value="payouts"
                  badge={
                    <Badge variant="gradient" dot={false}>
                      New
                    </Badge>
                  }
                >
                  Payouts
                </MenuItem>
              </MenuSub>
            </MenuGroup>
            <MenuGroup label="Account">
              <MenuItem value="team" icon={<Users />}>
                Team
              </MenuItem>
              <MenuItem value="settings" icon={<Settings />} shortcut="⌘,">
                Settings
              </MenuItem>
            </MenuGroup>
          </Menu>
        </div>
      ))}
    </div>
  );
}