import { NavLink } from 'react-router-dom'

/**
 * Two ways to read the same book.
 *
 * <p><b>Portfolio overview</b> ranks by composite score — the register an officer
 * already knows how to read, and the view that has been demonstrated.
 * <b>Early warning</b> ranks by when the downside first stops covering the
 * instalment, which is the thing this platform can show that a bureau score
 * cannot.
 *
 * <p>They are tabs rather than one merged screen because they answer different
 * questions and sort by different keys. Merging them would mean picking one sort
 * order and losing the other.
 */
const TABS = [
  { to: '/officer', label: 'Portfolio overview', end: true },
  { to: '/officer/early-warning', label: 'Early warning', end: false },
]

export function DashboardTabs() {
  return (
    <div className="flex gap-1 border-b border-line mb-4">
      {TABS.map((t) => (
        <NavLink
          key={t.to}
          to={t.to}
          end={t.end}
          className={({ isActive }) =>
            [
              'px-3.5 py-2 text-[12px] font-semibold whitespace-nowrap border-b-2 -mb-px transition-colors',
              isActive
                ? 'text-lp-blue border-lp-blue'
                : 'text-ink-3 border-transparent hover:text-ink',
            ].join(' ')
          }
        >
          {t.label}
        </NavLink>
      ))}
    </div>
  )
}