'use client';
import { Rows2, Rows3, Rows4 } from 'lucide-react';
import { cn } from '@/lib/cn';
import { DENSITY_LABELS, useDensity } from '@/lib/density';

/** Three-state density toggle (comfortable → compact → dense). Touch target 44 px; `aria-label` announces the current state. */
export function DensityToggle({ className }: { className?: string }) {
  const [d, , cycle] = useDensity();
  const Icon = d === 'comfortable' ? Rows2 : d === 'compact' ? Rows3 : Rows4;
  const label = `Density: ${DENSITY_LABELS[d].toLowerCase()}`;
  return (
    <button type="button" onClick={cycle} data-density-toggle className={cn('flex size-11 items-center justify-center rounded-sm text-ink-2 hover:bg-surface-2 hover:text-ink md:size-10', className)} aria-label={`${label} — switch`} title={label}>
      <Icon className="size-[18px]" aria-hidden />
    </button>
  );
}