/**
 * Сегментированный переключатель в стиле iOS 26.
 * Переиспользуется для выбора периода (день/неделя/месяц) и т.п.
 */

'use client';

import React from 'react';

export interface SegmentedOption<T extends string = string> {
  value: T;
  label: string;
}

export interface SegmentedControlProps<T extends string = string> {
  options: SegmentedOption<T>[];
  value: T;
  onChange: (value: T) => void;
  /** Доступность (например, во время загрузки) */
  disabled?: boolean;
  className?: string;
}

export function SegmentedControl<T extends string>({
  options,
  value,
  onChange,
  disabled = false,
  className = '',
}: SegmentedControlProps<T>): React.ReactElement {
  return (
    <div
      role="group"
      aria-label="Выбор периода"
      className={className}
      style={{
        display: 'inline-flex',
        padding: 4,
        borderRadius: 14,
        background: 'var(--ios26-segment-bg)',
        gap: 2,
      }}
    >
      {options.map((opt) => {
        const isActive = opt.value === value;
        return (
          <button
            key={opt.value}
            type="button"
            disabled={disabled}
            onClick={() => onChange(opt.value)}
            style={{
              padding: '8px 14px',
              fontSize: 13,
              fontWeight: 500,
              borderRadius: 12,
              border: 'none',
              cursor: disabled ? 'not-allowed' : 'pointer',
              // Активный сегмент подсвечиваем primary
              background: isActive ? 'var(--md-sys-color-primary)' : 'transparent',
              color: isActive
                ? 'var(--md-sys-color-on-primary)'
                : 'var(--md-sys-color-on-surface-variant)',
              transition: 'background 0.2s ease, color 0.2s ease',
              opacity: disabled ? 0.6 : 1,
            }}
          >
            {opt.label}
          </button>
        );
      })}
    </div>
  );
}