Menu — settings page

"use client";

import { Avatar, Badge, Menu, MenuGroup, MenuItem, MenuSeparator, MenuSub } from "@waveinno/ui";
import { Bell, Building2, CreditCard, KeyRound, LogOut, Receipt, ShieldCheck, UserRound } from "lucide-react";
import * as React from "react";

const SECTIONS: Record<string, string> = {
  profile: "Your name, photo and phone number.",
  security: "Password, two-step sign-in and active sessions.",
  notifications: "What reaches you by SMS, email and push.",
  site: "Name, address and opening hours of Gulshan Parking.",
  rates: "What a car or bike pays, by the hour and by the month.",
  billing: "Your plan, invoices and the card on file.",
  keys: "Keys for the gate controllers and your own systems.",
};

export default function SettingsDemo() {
  const [section, setSection] = React.useState("security");
  return (
    <div className="grid gap-5 rounded-card border border-border bg-canvas p-3 md:grid-cols-[280px_1fr]">
      <Menu variant="raised" value={section} onValueChange={setSection} aria-label="Settings">
        <div className="flex items-center gap-3 px-2.5 pb-2 pt-1.5">
          <Avatar name="Karim Ahmed" />
          <div className="min-w-0">
            <p className="truncate text-[13px] font-semibold text-text">Karim Ahmed</p>
            <p className="truncate text-[11.5px] text-muted">Owner · Gulshan Parking Ltd</p>
          </div>
        </div>
        <MenuSeparator />
        <MenuGroup label="You">
          <MenuItem value="profile" icon={<UserRound />} description="Name, photo, phone">
            Profile
          </MenuItem>
          <MenuItem value="security" icon={<ShieldCheck />} description="Password, two-step sign-in">
            Security
          </MenuItem>
          <MenuItem value="notifications" icon={<Bell />} description="SMS, email, push" count={3}>
            Notifications
          </MenuItem>
        </MenuGroup>
        <MenuGroup label="Business">
          <MenuSub label="Site" icon={<Building2 />} description="Gulshan · 2 gates" defaultOpen>
            <MenuItem value="site">Details</MenuItem>
            <MenuItem value="rates">Rates</MenuItem>
          </MenuSub>
          <MenuItem
            value="billing"
            icon={<CreditCard />}
            description="Plan, invoices"
            badge={
              <Badge variant="gradient" dot={false}>
                Pro
              </Badge>
            }
          >
            Billing
          </MenuItem>
          <MenuItem value="keys" icon={<KeyRound />} description="Gate controllers, API">
            API keys
          </MenuItem>
        </MenuGroup>
        <MenuSeparator />
        <MenuItem danger icon={<LogOut />}>
          Sign out
        </MenuItem>
      </Menu>
      <div className="rounded-card border border-border bg-raised p-5">
        <p className="ov">Settings</p>
        <h3 className="disp mt-1 text-[18px] font-semibold capitalize text-text">{section === "keys" ? "API keys" : section}</h3>
        <p className="mt-1 text-[13px] text-body">{SECTIONS[section]}</p>
        <div className="mt-5 flex items-center gap-2 rounded-ctl border border-dashed border-border2 p-4 text-[12.5px] text-muted">
          <Receipt className="size-4" /> Section content goes here. Try ↑ ↓ Home End, and → ← on “Site”.
        </div>
      </div>
    </div>
  );
}