import * as React from 'react';
import styles from './OwnTabs.module.scss';
import { OwnTab } from '../../shared/routing';

interface IOwnTabItem {
  id: OwnTab;
  title: string;
}

// Суффикс «мной» намеренно опущен: раздел уже называется «Мои заявки», и внутри
// него он повторялся бы в каждой вкладке. Первая вкладка — про авторство,
// остальные три — про решения пользователя в ЧУЖИХ маршрутах.
const ITEMS: IOwnTabItem[] = [
  { id: 'created', title: 'Инициированные' },
  { id: 'approved', title: 'Согласованные' },
  { id: 'rejected', title: 'Отклонённые' },
  { id: 'executed', title: 'Выполненные' },
];

interface IOwnTabsProps {
  activeId: OwnTab;
  onChange: (id: OwnTab) => void;
}

/** Горизонтальный переключатель подвкладок раздела «Мои заявки». */
export const OwnTabs: React.FC<IOwnTabsProps> = ({ activeId, onChange }) => (
  <nav className={styles.tabs} aria-label="Разделы моих заявок">
    {ITEMS.map((item) => {
      const isActive = item.id === activeId;
      const tabClasses = [styles.tab, isActive ? styles.active : ''].filter(Boolean).join(' ');

      return (
        <button
          key={item.id}
          type="button"
          className={tabClasses}
          aria-current={isActive ? 'page' : undefined}
          onClick={() => onChange(item.id)}
        >
          {item.title}
        </button>
      );
    })}
  </nav>
);