import type { ReactNode } from 'react';
import Button from '../ui/Button';

type NavId = 'portfolio' | 'trade' | 'earn' | 'vaults' | 'leaderboard' | 'more';

const navItems: Array<{ id: NavId; label: string }> = [
  { id: 'portfolio', label: 'Portfolio' },
  { id: 'trade', label: 'Trade' },
  { id: 'earn', label: 'Earn' },
  { id: 'vaults', label: 'Vaults' },
  { id: 'leaderboard', label: 'Leaderboard' },
  { id: 'more', label: 'More' },
];

type Props = {
  active?: NavId;
  onSelect?: (id: NavId) => void;
  rightSlot?: ReactNode;
};

export default function TopNav({ active = 'trade', onSelect, rightSlot }: Props) {
  return (
    <header className="topNav">
      <div className="topNav__left">
        <div className="topNav__brand" aria-label="Trade">
          <div className="topNav__brandMark" aria-hidden="true" />
          <div className="topNav__brandName">Trade</div>
        </div>
        <nav className="topNav__menu" aria-label="Primary">
          {navItems.map((it) => (
            <button
              key={it.id}
              type="button"
              className={['topNav__link', active === it.id ? 'topNav__link--active' : ''].filter(Boolean).join(' ')}
              onClick={() => onSelect?.(it.id)}
            >
              {it.label}
            </button>
          ))}
        </nav>
      </div>

      <div className="topNav__right">
        {rightSlot ?? (
          <>
            <Button size="sm" variant="primary" type="button">
              Deposit
            </Button>
            <button className="topNav__iconBtn" type="button" aria-label="Settings">
              ⚙
            </button>
            <div className="topNav__account">
              <div className="topNav__accountName">Main Account</div>
              <div className="topNav__accountSub">visualizer</div>
            </div>
          </>
        )}
      </div>
    </header>
  );
}