DensityToggle

"use client";

import { useIsPhone } from "@/hooks/ledger/use-media-query";
import { cn } from "@/lib/ledger/cn";
import type { Density } from "@/lib/ledger/money.types";

export interface DensityToggleProps {
  className?: string;
  /** Off when the surface has no rows to set the density of. */
  disabled?: boolean;
  /** Said in the tooltip, so a dead control explains itself rather than sulking. */
  disabledReason?: string;
  onValueChange: (d: Density) => void;
  value: Density;
}

const OPTIONS: { key: Density; label: string }[] = [
  { key: "compact", label: "Compact" },
  { key: "default", label: "Default" },
  { key: "comfortable", label: "Comfortable" },
];

/**
 * Persisted per user, and clamped to `comfortable` on a phone regardless of
 * the stored preference — 32px rows with 13px text fails both touch targets
 * and arm's-length legibility.
 */
export function DensityToggle({
  value,
  onValueChange,
  className,
  disabled,
  disabledReason,
}: DensityToggleProps) {
  const isPhone = useIsPhone();

  return (
    <div
      aria-disabled={disabled || undefined}
      aria-label="Row density"
      className={cn("flex rounded-sm border border-border p-0.5", className)}
      role="radiogroup"
      title={disabled ? disabledReason : undefined}
    >
      {OPTIONS.map((o) => {
        const clamped = disabled || (isPhone && o.key !== "comfortable");
        return (
          <button
            aria-checked={isPhone ? o.key === "comfortable" : value === o.key}
            className={cn(
              "press h-7 rounded-xs px-2.5 text-label font-medium",
              (isPhone ? o.key === "comfortable" : value === o.key)
                ? "bg-surface-selected text-text-primary"
                : "text-text-secondary hover:bg-surface-hover",
              clamped && "cursor-not-allowed opacity-40",
            )}
            disabled={clamped}
            key={o.key}
            onClick={() => onValueChange(o.key)}
            role="radio"
            title={disabled ? disabledReason : clamped ? "Clamped to comfortable on a phone" : undefined}
            type="button"
          >
            {o.label}
          </button>
        );
      })}
    </div>
  );
}