import {
  BreadcrumbItem,
  Breadcrumbs,
  Button,
  Chart,
  ChartIcon,
  CreditCardIcon,
  CustomerTable,
  DashboardPage,
  DashboardShell,
  EmptyState,
  GlobeIcon,
  HomeIcon,
  InboxIcon,
  SegmentedControl,
  SegmentedControlItem,
  SettingsIcon,
  SparkleIcon,
  UsersIcon,
  findNavItem,
  trailOf,
  type Customer,
  type NavGroup,
} from "@rdloom/react";

    <DashboardPage
      title="Dashboard"
      description="How the business is doing this month."
      actions={
        <>
          <Button variant="secondary">Export</Button>
          <Button>New report</Button>
        </>
      }
      stats={[
        { label: "Total revenue", value: "$1,250.00", trend: { change: 12.5 }, summary: "Trending up this month", description: "Visitors for the last 6 months" },
        { label: "New customers", value: 1234, trend: { change: -20 }, summary: "Down 20% this period", description: "Acquisition needs attention" },
        { label: "Active accounts", value: 45678, trend: { change: 12.5 }, summary: "Strong user retention", description: "Engagement exceeds targets" },
        { label: "Growth rate", value: "4.5%", trend: { change: 4.5 }, summary: "Steady performance increase", description: "Meets growth projections" },
      ]}
    >
      <div className="rounded-2xl border border-[var(--rd-color-border-default)] bg-[var(--rd-color-surface-default)] p-5 [box-shadow:var(--rd-elevation-raised)]">
        <Chart
          type="area"
          title="Total visitors"
          description={`Total for ${RANGES[range].toLowerCase()}`}
          height={260}
          actions={
            <SegmentedControl label="Time range" selectedKey={range} onChange={(key) => setRange(String(key) as keyof typeof RANGES)} size="sm">
              {ORDER.map((key) => (
                <SegmentedControlItem key={key} id={key}>
                  {RANGES[key]}
                </SegmentedControlItem>
              ))}
            </SegmentedControl>
          }
          data={{ labels: data.map((d) => d.label), series: [{ name: "Desktop", values: data.map((d) => d.desktop) }, { name: "Mobile", values: data.map((d) => d.mobile) }] }}
        />
      </div>
      <div className="flex flex-col gap-3">
        <h2 className="text-lg font-semibold tracking-[-0.01em]">Recent customers</h2>
        <CustomerTable customers={customers} insights="none" pageSize={5} locale="en-US" />
      </div>
    </DashboardPage>
  );
}

// The shell fills its parent. Items without an href call onNavigate; with an href they are real links.
export default function DashboardShellBasicExample() {
  const [current, setCurrent] = useState("overview");
  const [team, setTeam] = useState(teams[0]);
  const page = findNavItem(navigation, current)!;
  const trail = trailOf(navigation, current);

  return (
    <div className="h-full w-full">
      <DashboardShell
        navigation={navigation}
        currentId={current}
        onNavigate={(item) => setCurrent(item.id)}
        brand={team.name}
        team={team}
        teams={teams}
        onTeamChange={(t) => setTeam(teams.find((x) => x.id === t.id) ?? teams[0])}
        user={{ name: "Ada Lovelace", email: "ada@example.com", menu: [{ id: "profile", label: "Your profile", onSelect: () => {} }, { id: "out", label: "Sign out", onSelect: () => {}, variant: "danger" }] }}
        onSearch={() => {}}
        header={
          <Breadcrumbs label="You are here">
            <BreadcrumbItem>{navigation.find((g) => g.items.some((i) => i.id === current))?.label ?? "Platform"}</BreadcrumbItem>
            <BreadcrumbItem>{trail[trail.length - 1] ?? page.label}</BreadcrumbItem>
          </Breadcrumbs>
        }
      >
        {current === "overview" ? (
          <Overview />
        ) : (
          <DashboardPage title={page.label}>
            <EmptyState title={`${page.label} is yours to build`} description="Put any page here. The sidebar, the top bar, the breadcrumb and the way they fold on a phone are already done." />
          </DashboardPage>
        )}
      </DashboardShell>
    </div>