import React from "react";
import classnames from "classnames";
import PropTypes from "prop-types";

interface INavbarProps {
  className?: string;
  variant?: "light" | "dark";
  bg?: string;
  expand?: "sm" | "md" | "lg" | "xl";
  children?: React.ReactNode | React.ReactNode[];
  style?: object;
}

const Navbar: React.FC<INavbarProps> = ({ className, bg, variant, expand, children, ...props }) => {
  return (
    <nav
      {...props}
      className={classnames(
        "navbar",
        className,
        expand && `navbar-expand-${expand}`,
        variant && `navbar-${variant}`,
        bg && `bg-${bg}`
      )}
    >
      {children}
    </nav>
  );
};

Navbar.displayName = "Navbar";

Navbar.propTypes = {
  className: PropTypes.string,
  variant: PropTypes.oneOf(["light", "dark"]),
  bg: PropTypes.string,
  expand: PropTypes.oneOf(["sm", "md", "lg", "xl"]),
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
  style: PropTypes.object
};

export default Navbar;