import React from 'react';
import { Box } from './Box';
import { NavLink } from './NavLink';
import { routes } from '@/lib/routing/RouteConfig';
import { Trophy, Users, LayoutGrid, Flag, Calendar } from 'lucide-react';

interface PublicTopNavProps {
  pathname: string;
}

/**
 * PublicTopNav is a horizontal navigation component for public pages.
 * It displays navigation links to public routes like Leagues, Drivers, Teams, etc.
 */
export function PublicTopNav({ pathname }: PublicTopNavProps) {
  const navItems = [
    { label: 'Leagues', href: routes.public.leagues, icon: Trophy },
    { label: 'Drivers', href: routes.public.drivers, icon: Users },
    { label: 'Teams', href: routes.public.teams, icon: Flag },
    { label: 'Leaderboards', href: routes.public.leaderboards, icon: LayoutGrid },
    { label: 'Races', href: routes.public.races, icon: Calendar },
  ];

  return (
    <Box
      as="nav"
      data-testid="public-top-nav"
      display="flex"
      alignItems="center"
      gap={4}
      width="full"
    >
      {navItems.map((item) => (
        <NavLink
          key={item.href}
          href={item.href}
          label={item.label}
          icon={item.icon}
          isActive={pathname === item.href}
          variant="top"
        />
      ))}
    </Box>
  );
}