type Props = {
  /** 1 = نوبت اول، 2 = نوبت دوم، null = کارنامه سالانه */
  value: number | null;
  onChange: (term: number | null) => void;
};

const OPTIONS: Array<{ key: string; label: string; value: number | null; icon: string }> = [
  { key: 'term1', label: 'نوبت اول', value: 1, icon: 'bi-1-circle' },
  { key: 'term2', label: 'نوبت دوم', value: 2, icon: 'bi-2-circle' },
  { key: 'annual', label: 'کارنامه سالانه', value: null, icon: 'bi-calendar-range' },
];

/** انتخابگر نوبت — کنترل بخش‌بندی‌شده (segmented). */
export function TermSelector({ value, onChange }: Props) {
  return (
    <div className="rc-term-selector" role="tablist" aria-label="انتخاب نوبت">
      {OPTIONS.map((opt) => {
        const active = opt.value === value;
        return (
          <button
            key={opt.key}
            type="button"
            role="tab"
            aria-selected={active}
            className={`rc-term-option${active ? ' rc-term-option--active' : ''}`}
            onClick={() => onChange(opt.value)}
          >
            <i className={`bi ${opt.icon}`} aria-hidden="true" />
            {opt.label}
          </button>
        );
      })}
    </div>
  );
}