import React from 'react';

interface SegmentedControlProps<T extends string> {
  options: { value: T; label: string }[];
  value: T;
  onChange: (v: T) => void;
  size?: 'sm' | 'md';
}

export default function SegmentedControl<T extends string>({
  options,
  value,
  onChange,
  size = 'md',
}: SegmentedControlProps<T>) {
  return (
    <div className={`seg seg-${size}`} role="tablist">
      {options.map(opt => (
        <button
          key={opt.value}
          type="button"
          role="tab"
          aria-selected={value === opt.value}
          className={`seg-item${value === opt.value ? ' active' : ''}`}
          onClick={() => onChange(opt.value)}
        >
          {opt.label}
        </button>
      ))}
      <style>{`
        .seg {
          display: flex;
          background: rgba(255,255,255,0.06);
          border-radius: 10px;
          padding: 3px;
          gap: 2px;
        }
        .seg-sm .seg-item { font-size: 11px; padding: 6px 8px; }
        .seg-md .seg-item { font-size: 12px; padding: 8px 10px; }
        .seg-item {
          flex: 1;
          border-radius: 8px;
          color: var(--gc-text-muted);
          font-weight: 500;
          min-height: 32px;
          transition: background 0.15s, color 0.15s;
        }
        .seg-item.active {
          background: var(--gc-accent-soft);
          color: var(--gc-accent);
          font-weight: 600;
        }
      `}</style>
    </div>
  );
}