Button Group

"use client";

import { useState, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface ButtonGroupOption {
  value: string;
  label: ReactNode;
  /** Accessible label when `label` is an icon. */
  ariaLabel?: string;
}

export interface ButtonGroupProps {
  options?: ButtonGroupOption[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Group label for screen readers. */
  label?: string;
  size?: "sm" | "md";
  className?: string;
}

const DEFAULT_OPTIONS: ButtonGroupOption[] = [
  { value: "7d", label: "7D" },
  { value: "30d", label: "30D" },
  { value: "qtd", label: "QTD" },
  { value: "ytd", label: "YTD" },
  { value: "12m", label: "12M" },
];

/** Attached segmented button group with shared borders (radio semantics) — for period pickers and view switchers. Selected segment gets a surface-2 fill and bold label. */
export function ButtonGroup({ options = DEFAULT_OPTIONS, value, defaultValue, onValueChange, label = "Period", size = "md", className }: ButtonGroupProps) {
  const [inner, setInner] = useState(defaultValue ?? options[0]?.value);
  const current = value ?? inner;
  const select = (v: string) => {
    setInner(v);
    onValueChange?.(v);
  };
  return (
    <div role="radiogroup" aria-label={label} className={cn("da-stroke inline-flex overflow-hidden rounded-da-md bg-da-surface shadow-da-sm", className)}>
      {options.map((o, i) => {
        const on = o.value === current;
        return (
          <button
            key={o.value}
            type="button"
            role="radio"
            aria-checked={on}
            aria-label={o.ariaLabel}
            tabIndex={on ? 0 : -1}
            onClick={() => select(o.value)}
            onKeyDown={(e) => {
              const d = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
              if (!d) return;
              e.preventDefault();
              const next = options[(i + d + options.length) % options.length]!;
              select(next.value);
              (e.currentTarget.parentElement?.children[(i + d + options.length) % options.length] as HTMLElement | undefined)?.focus();
            }}
            className={cn(
              "da-focus da-transition inline-flex items-center justify-center gap-1.5 border-da-border font-medium not-first:border-l focus-visible:relative focus-visible:z-10 [&_svg]:size-4",
              size === "sm" ? "h-8 px-2.5 text-xs" : "h-9 px-3.5 text-sm",
              on ? "bg-da-surface-2 font-semibold text-da-fg" : "text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg",
            )}
          >
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

export default ButtonGroup;