Toggle Group

"use client";

import type { ReactNode } from "react";
import { ToggleGroup as RToggleGroup } from "radix-ui";
import { cn } from "@/lib/utils";

export interface ToggleGroupOption {
  value: string;
  label: string;
  icon?: ReactNode;
  /** Show only the icon; label becomes the accessible name. */
  iconOnly?: boolean;
}

export interface ToggleGroupProps {
  options?: ToggleGroupOption[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  size?: "sm" | "md";
  "aria-label"?: string;
  className?: string;
}

/** Single-choice segmented toolbar (Radix ToggleGroup) with a raised active segment; arrow-key navigation. */
export function ToggleGroup({
  options = [
    { value: "1h", label: "1h" },
    { value: "24h", label: "24h" },
    { value: "7d", label: "7d" },
    { value: "30d", label: "30d" },
  ],
  value,
  defaultValue = "24h",
  onValueChange,
  size = "md",
  "aria-label": ariaLabel = "Time range",
  className,
}: ToggleGroupProps) {
  return (
    <RToggleGroup.Root
      type="single"
      value={value}
      defaultValue={value === undefined ? defaultValue : undefined}
      onValueChange={(v) => v && onValueChange?.(v)}
      aria-label={ariaLabel}
      className={cn("inline-flex rounded-da-md bg-da-muted p-0.5", className)}
    >
      {options.map((o) => (
        <RToggleGroup.Item
          key={o.value}
          value={o.value}
          aria-label={o.iconOnly ? o.label : undefined}
          className={cn(
            "da-focus da-transition inline-flex items-center justify-center gap-1.5 rounded-[calc(var(--da-radius-md)-2px)] font-medium text-da-muted-fg hover:text-da-fg data-[state=on]:bg-da-surface data-[state=on]:text-da-fg data-[state=on]:shadow-da-sm",
            size === "sm" ? "h-7 px-2.5 text-[12px]" : "h-8 px-3 text-[13px]",
            o.iconOnly && (size === "sm" ? "w-7 px-0" : "w-8 px-0"),
          )}
        >
          {o.icon}
          {!o.iconOnly && o.label}
        </RToggleGroup.Item>
      ))}
    </RToggleGroup.Root>
  );
}

export default ToggleGroup;