DashboardShell

import * as React from "react";
import { cn } from "@/lib/ledger/cn";

export interface DashboardShellProps extends React.ComponentPropsWithoutRef<"div"> {
  /**
   * The heading level for `title`. A dashboard is normally the whole page, so
   * `h1` is the honest default — but when one is embedded under a page that
   * already has its own `h1` (the showcase does exactly this), two `h1`s is a
   * document-outline bug. Set `h2` there.
   */
  headingLevel?: "h1" | "h2";
  subtitle?: string;
  title: string;
  toolbar?: React.ReactNode;
}

/**
 * A 12/8/4-column responsive grid with equal-height rows, so figure
 * baselines align across a row — the most visible alignment failure on any
 * dashboard, and a one-line fix.
 */
export const DashboardShell = React.forwardRef<HTMLDivElement, DashboardShellProps>(
  ({ className, title, subtitle, toolbar, headingLevel: Heading = "h1", children, ...props }, ref) => (
    <div className={cn("w-full", className)} ref={ref} {...props}>
      <header className="mb-6 flex flex-wrap items-end justify-between gap-4">
        <div>
          <Heading className="text-title-lg font-medium">{title}</Heading>
          {subtitle ? <p className="mt-1 text-body text-text-secondary">{subtitle}</p> : null}
        </div>
        {toolbar}
      </header>
      <div className="grid auto-rows-fr grid-cols-4 gap-4 md:grid-cols-8 xl:grid-cols-12">{children}</div>
    </div>
  ),
);
DashboardShell.displayName = "DashboardShell";

export function DashboardTile({
  span = 4,
  className,
  children,
}: {
  span?: 3 | 4 | 6 | 8 | 12;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <div
      className={cn(
        "col-span-4",
        span === 3 && "md:col-span-4 xl:col-span-3",
        span === 4 && "md:col-span-4 xl:col-span-4",
        span === 6 && "md:col-span-8 xl:col-span-6",
        span === 8 && "md:col-span-8 xl:col-span-8",
        span === 12 && "md:col-span-8 xl:col-span-12",
        className,
      )}
    >
      {children}
    </div>
  );
}