import React from 'react';
import { Link, useLocation } from 'react-router';

const LINKS = [
  { to: '/admin/resources',        label: 'منابع' },
  { to: '/admin/resources/types',  label: 'نوع منابع' },
  { to: '/admin/resources/skills', label: 'مهارت‌ها' },
  { to: '/admin/resources/pools',  label: 'استخر منابع' },
];

/**
 * چهار صفحهٔ خانوادهٔ منابع، یک آیتم در منوی تنظیمات دارند؛ این نوار جابه‌جایی بینشان
 * است. اگر هر چهار تا آیتم جدا در منو می‌گرفتند، منوی تنظیمات یک‌سوم بلندتر می‌شد بی‌آنکه
 * چیزی روشن‌تر شود.
 */
export default function ResourcesSubNav() {
  const { pathname } = useLocation();

  return (
    <div className="seg" style={{ marginBottom: 'var(--gap)', overflowX: 'auto', flexWrap: 'nowrap' }}>
      {LINKS.map((l) => (
        <Link
          key={l.to}
          to={l.to}
          className={pathname === l.to ? 'active' : ''}
          style={{ whiteSpace: 'nowrap' }}
        >
          {l.label}
        </Link>
      ))}
    </div>
  );
}