import React, { forwardRef } from "react";
import cn from "classnames";

export interface INavProps {
  role?: string;
  variant?: "pills" | "tabs";
  isFill?: boolean;
  isJustified?: boolean;
  as?: React.ElementType;
  className?: string;
}

const Nav: React.FC<INavProps> = forwardRef(
  (
    { variant, role, isFill, isJustified, className, children, as: Component = "div", ...props },
    ref
  ) => {
    return (
      <Component
        {...props}
        role={role}
        ref={ref}
        className={cn(
          "nav",
          {
            "nav-tabs": variant === "tabs",
            "nav-pills": variant === "pills",
            "nav-fill": isFill,
            "nav-justified": isJustified
          },
          className
        )}
      >
        {children}
      </Component>
    );
  }
);

Nav.displayName = "Nav";

export default Nav;