Tabs

import {
  CancelCircleIcon,
  CheckmarkCircle02Icon,
  DashboardSquare01Icon,
  DeliveryTruck01Icon,
  Loading03Icon,
  Menu01Icon,
  Package01Icon,
} from "@hugeicons/core-free-icons";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/hiip-ui/tabs";

// Counts are the point of this one: a status filter is unusable without them,
// because "Delivery failed" reads the same whether it holds 3 rows or none.
// Typed off `TabsTrigger` itself rather than `as const`: only some of these
// rows carry an icon or a tone, and a const-asserted union has no `icon` at all
// on the ones that don't — which is a type error at the spread, not a fact
// about the data.
const SHIPPING: {
  value: string;
  label: string;
  icon?: React.ComponentProps<typeof TabsTrigger>["icon"];
  tone?: React.ComponentProps<typeof TabsTrigger>["tone"];
  count: number;
}[] = [
  { value: "all", label: "All", count: 159 },
  {
    value: "not-shipped",
    label: "Not shipped",
    icon: Loading03Icon,
    count: 24,
  },
  {
    value: "created",
    label: "Order created",
    icon: Package01Icon,
    tone: "info",
    count: 0,
  },
  {
    value: "transit",
    label: "In transit",
    icon: DeliveryTruck01Icon,
    tone: "warning",
    count: 4,
  },
  {
    value: "delivered",
    label: "Delivered",
    icon: CheckmarkCircle02Icon,
    tone: "success",
    count: 128,
  },
  {
    value: "failed",
    label: "Delivery failed",
    icon: CancelCircleIcon,
    tone: "danger",
    count: 3,
  },
];

const PANEL =
  "rounded-xl border border-dashed p-6 text-center text-sm text-muted-foreground";

function TabsDemo() {
  return (
    <div className="flex w-full flex-col gap-8">
      {/* The pill: a control inside a toolbar, switching a view of one thing. */}
      <Tabs defaultSelectedKey="board" className="gap-3">
        <TabsList className="self-center">
          <TabsTrigger id="board" icon={DashboardSquare01Icon}>
            Board
          </TabsTrigger>
          <TabsTrigger id="table" icon={Menu01Icon}>
            Table
          </TabsTrigger>
        </TabsList>
        <TabsContent id="board" className={PANEL}>
          Cards, grouped by column
        </TabsContent>
        <TabsContent id="table" className={PANEL}>
          Rows, sorted by date
        </TabsContent>
      </Tabs>

      {/* The underline: page-level sections, with a count on each. Wide enough
          to overflow on a phone, so the list scrolls rather than widening the
          page. */}
      <Tabs defaultSelectedKey="created" className="gap-3">
        <div className="max-w-full overflow-x-auto">
          <TabsList variant="line" className="w-max">
            {SHIPPING.map((s) => (
              <TabsTrigger
                key={s.value}
                id={s.value}
                icon={s.icon}
                tone={s.tone}
                count={s.count}
              >
                {s.label}
              </TabsTrigger>
            ))}
          </TabsList>
        </div>
        {SHIPPING.map((s) => (
          <TabsContent key={s.value} id={s.value} className={PANEL}>
            {s.count} {s.count === 1 ? "order" : "orders"} — {s.label}
          </TabsContent>
        ))}
      </Tabs>
    </div>
  );
}