import React from "react";
import classNames from "classnames";
import { LinkProps, Link } from "../Link";
import { bemHOF } from "../../utilities/bem";

const b = bemHOF("TopBar");

export interface SubNavItemProps extends LinkProps {
  isActive?: boolean;
}

export const TopBarSubNavItem = (props: SubNavItemProps) => {
  const { isActive = false, className, ...rest } = props;
  const classes = classNames(
    b({ e: "subnav-item" }),
    { [b({ e: "subnav-item", m: "isActive" })]: isActive },
    className,
  );

  return <Link className={classes} noStyles {...rest} />;
};