import { Responsive } from 'components/helpers/Responsive';
import { NavLink } from 'react-router-dom';

import { PropsOf } from 'types';

export interface NavBarButtonOwnProps<
  E extends React.ElementType = React.ElementType
> {
  as?: E;
}

export type NavBarButtonProps<E extends React.ElementType> =
  NavBarButtonOwnProps<E> & Omit<PropsOf<E>, keyof NavBarButtonOwnProps>;

export const defaultElement = NavLink;

export const NavBarButton = (({ as, ...props }: NavBarButtonOwnProps) => {
  const Element = as || defaultElement;
  return (
    <Responsive>
      <Element
        className="navbar-button w100 h100 flex alignCenter justifyCenter"
        {...props}
      />
    </Responsive>
  );
}) as <E extends React.ElementType = typeof defaultElement>(
  props: NavBarButtonProps<E>
) => JSX.Element;