'use client';

import Link from 'next/link';

import { Trans } from '@kit/ui/trans';
import { cn } from '@kit/ui/utils';

interface FischereiTabNavigationProps {
  account: string;
  activeTab: string;
}

const TABS = [
  { id: 'overview', i18nKey: 'fischerei:nav.overview', path: '' },
  { id: 'waters', i18nKey: 'fischerei:nav.waters', path: '/waters' },
  { id: 'species', i18nKey: 'fischerei:nav.species', path: '/species' },
  { id: 'stocking', i18nKey: 'fischerei:nav.stocking', path: '/stocking' },
  { id: 'leases', i18nKey: 'fischerei:nav.leases', path: '/leases' },
  {
    id: 'catch-books',
    i18nKey: 'fischerei:nav.catchBooks',
    path: '/catch-books',
  },
  { id: 'permits', i18nKey: 'fischerei:nav.permits', path: '/permits' },
  {
    id: 'competitions',
    i18nKey: 'fischerei:nav.competitions',
    path: '/competitions',
  },
  {
    id: 'statistics',
    i18nKey: 'fischerei:nav.statistics',
    path: '/statistics',
  },
] as const;

export function FischereiTabNavigation({
  account,
  activeTab,
}: FischereiTabNavigationProps) {
  const basePath = `/home/${account}/fischerei`;

  return (
    <div className="mb-6 border-b">
      <nav
        className="-mb-px flex space-x-1 overflow-x-auto"
        aria-label="Fisheries Navigation"
      >
        {TABS.map((tab) => {
          const isActive = tab.id === activeTab;

          return (
            <Link
              key={tab.id}
              href={`${basePath}${tab.path}`}
              data-test={`fischerei-tab-${tab.id}`}
              className={cn(
                'border-b-2 px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors',
                isActive
                  ? 'border-primary text-primary'
                  : 'text-muted-foreground hover:border-muted-foreground/30 hover:text-foreground border-transparent',
              )}
            >
              <Trans i18nKey={tab.i18nKey} />
            </Link>
          );
        })}
      </nav>
    </div>
  );
}