import classNames from 'classnames';
import React, { ComponentProps, forwardRef } from 'react';
import { Link } from 'react-router-dom';
import { as } from 'folds';
import * as css from './styles.css';

export const NavItem = as<
  'div',
  {
    highlight?: boolean;
  } & css.RoomSelectorVariants
>(
  (
    {
      as: AsNavItem = 'div',
      className,
      highlight,
      variant,
      radii,
      children,
      'aria-selected': selected,
      ...props
    },
    ref,
  ) => (
    // [Gitea #222] Callers pass `aria-selected`, but that attribute is only
    // valid on option/tab/row roles; on a plain div axe flags it as critical.
    // Keep the prop for callers and styling, expose the state as aria-current.
    <AsNavItem
      className={classNames(css.NavItem({ variant, radii }), className)}
      data-highlight={highlight}
      data-selected={selected === true || selected === 'true' ? true : undefined}
      aria-current={selected === true || selected === 'true' ? 'page' : undefined}
      {...props}
      ref={ref}
    >
      {children}
    </AsNavItem>
  ),
);

export const NavLink = forwardRef<HTMLAnchorElement, ComponentProps<typeof Link>>(
  ({ className, ...props }, ref) => (
    <Link className={classNames(css.NavLink, className)} {...props} ref={ref} />
  ),
);

export const NavButton = as<'button'>(
  ({ as: AsNavButton = 'button', className, ...props }, ref) => (
    <AsNavButton className={classNames(css.NavLink, className)} {...props} ref={ref} />
  ),
);