Segmented Control

'use client';

import './SegmentedControl.css';

/**
 * SegmentedControl — A horizontal group of button-like radio choices for switching views or modes.
 * 
 * @param {string} name - Shared HTML name for the internal radio inputs.
 * @param {Array<{label: string, value: string, checked?: boolean}>} options - Selectable segments.
 * @param {string} idPrefix - Prefix for auto-generating input IDs.
 */
export interface SegmentedControlProps {
  name: string;
  options: Array<{ label: string; value: string; checked?: boolean }>;
  idPrefix?: string;
}

export function SegmentedControl({ name, options = [], idPrefix = "seg" }: SegmentedControlProps) {
  return (
    <>
      <div className="segmented" data-rk-260788="">
        {options.map((opt, i) => (
          <div key={i} className="segmented-item" data-rk-260788="">
            <input type="radio" name={name} id={`${idPrefix}-${i}`} defaultValue={opt.value} defaultChecked={opt.checked} className="segmented-input" data-rk-260788="" />
            <label htmlFor={`${idPrefix}-${i}`} className="segmented-label" data-rk-260788="">{opt.label}</label>
          </div>
        ))}
      </div>
    </>
  );
}

export default SegmentedControl;

/* SegmentedControl — ported from astro-component-kit (forms/SegmentedControl.astro) */

.segmented:where([data-rk-260788]) { 
  display: flex; position: relative; 
  background: var(--c-bg-elev, rgba(255,255,255,0.05)); 
  padding: 4px; border-radius: var(--r-md, 12px); 
  width: fit-content; border: 1px solid var(--c-border, rgba(255,255,255,0.05));
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.segmented-item:where([data-rk-260788]) { display: flex; }

.segmented-label:where([data-rk-260788]) { 
  padding: 0.5rem 1.4rem; cursor: pointer; z-index: 1; 
  font-size: 0.85rem; transition: all 0.25s ease; 
  color: var(--c-text-2, #94a3b8); 
  border-radius: var(--r-sm, 8px);
  font-weight: 500;
  user-select: none;
}

.segmented-input:where([data-rk-260788]) { display: none; }

.segmented-input:checked:where([data-rk-260788]) + .segmented-label:where([data-rk-260788]) { 
  color: var(--c-text-1, #fff); 
  font-weight: 700; 
  background: var(--c-primary, #6366f1); 
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.segmented-label:hover:not(.segmented-input:checked + .segmented-label):where([data-rk-260788]) {
  color: var(--c-text-1);
  background: rgba(255,255,255,0.03);
}