import React from 'react';

export type NavItem = {
  key: string;
  label: React.ReactNode;
  href?: string;
  active?: boolean;
  disabled?: boolean;
  onClick?: () => void;
};

export type NavProps = {
  items: NavItem[];
  variant?: 'tabs' | 'pills' | 'underline';
  fill?: boolean;
  justify?: boolean;
  vertical?: boolean;
  className?: string;
};

export function Nav({ items, variant = 'tabs', fill, justify, vertical, className = '' }: NavProps) {
  const classes = [
    'nav',
    variant === 'tabs' ? 'nav-tabs' : variant === 'pills' ? 'nav-pills' : 'nav-underline',
    fill ? 'nav-fill' : '',
    justify ? 'nav-justified' : '',
    vertical ? 'flex-column' : '',
    className
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <ul className={classes}>
      {items.map(item => (
        <li className="nav-item" key={item.key}>
          {item.href ? (
            <a
              className={`nav-link ${item.active ? 'active' : ''} ${item.disabled ? 'disabled' : ''}`.trim()}
              href={item.href}
              onClick={item.onClick}
              aria-disabled={item.disabled}
            >
              {item.label}
            </a>
          ) : (
            <button
              type="button"
              className={`nav-link ${item.active ? 'active' : ''} ${item.disabled ? 'disabled' : ''}`.trim()}
              onClick={item.onClick}
              disabled={item.disabled}
            >
              {item.label}
            </button>
          )}
        </li>
      ))}
    </ul>
  );
}