Segmented

"use client";

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

export interface SegmentedProps {
  options?: { value: string; label: string }[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  label?: string;
  className?: string;
}

/** Pill segmented control on a sand track: the selected pill is cream with a soft shadow and slides with a sliding indicator; radio semantics with arrow keys. */
export function Segmented({
  options = [
    { value: "month", label: "Month" },
    { value: "quarter", label: "Quarter" },
    { value: "year", label: "Year" },
  ],
  value,
  defaultValue,
  onValueChange,
  label = "Period",
  className,
}: SegmentedProps) {
  const [inner, setInner] = useState(defaultValue ?? options[0]?.value);
  const current = value ?? inner;
  const idx = Math.max(
    0,
    options.findIndex((o) => o.value === current),
  );
  const select = (i: number) => {
    const o = options[(i + options.length) % options.length]!;
    setInner(o.value);
    onValueChange?.(o.value);
    return (i + options.length) % options.length;
  };
  return (
    <div
      role="radiogroup"
      aria-label={label}
      className={cn("relative inline-grid rounded-da-pill bg-da-surface-2 p-1", className)}
      style={{ gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))` }}
    >
      <span
        aria-hidden
        className="absolute top-1 bottom-1 left-1 rounded-da-pill bg-da-surface shadow-da-sm transition-transform duration-(--da-duration) ease-da motion-reduce:transition-none"
        style={{ width: `calc((100% - 0.5rem) / ${options.length})`, transform: `translateX(${idx * 100}%)` }}
      />
      {options.map((o, i) => (
        <button
          key={o.value}
          type="button"
          role="radio"
          aria-checked={i === idx}
          tabIndex={i === idx ? 0 : -1}
          onClick={() => select(i)}
          onKeyDown={(e) => {
            const d = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
            if (!d) return;
            e.preventDefault();
            const n = select(i + d);
            (e.currentTarget.parentElement?.querySelectorAll("button")[n] as HTMLElement | undefined)?.focus();
          }}
          className={cn(
            "da-focus relative z-10 rounded-da-pill px-4 py-2 text-sm font-medium whitespace-nowrap sm:px-5 transition-colors duration-(--da-duration)",
            i === idx ? "text-da-fg" : "text-da-muted-fg hover:text-da-fg",
          )}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
}

export default Segmented;