import React, { ReactNode } from "react";
import classNames from "classnames";
import { Flex } from "../Flex";
import { bemHOF } from "../../utilities/bem";
import { BoxProps } from "../Box";
import { TopBarSubNavItem } from "./TopBarSubNavItem";
import { TopBarSubNav } from "./TopBarSubNav";
import { TopBarBreadcrumbs } from "./TopBarBreadcrumbs";

const b = bemHOF("TopBar");

export interface TopBarProps extends BoxProps {
  leftSlot: ReactNode;
  middleSlot?: ReactNode;
  rightSlot?: ReactNode;
}

const TopBar = ({
  leftSlot,
  middleSlot,
  rightSlot,
  className,
  ...rest
}: TopBarProps) => {
  return (
    <Flex className={classNames(b(), className)} {...rest}>
      <Flex className={b({ e: "left-slot" })}>{leftSlot}</Flex>
      {middleSlot && (
        <Flex className={b({ e: "middle-slot" })}>{middleSlot}</Flex>
      )}
      {rightSlot && <Flex className={b({ e: "right-slot" })}>{rightSlot}</Flex>}
    </Flex>
  );
};

TopBar.SubNav = TopBarSubNav;
TopBar.SubNavItem = TopBarSubNavItem;
TopBar.Breadcrumbs = TopBarBreadcrumbs;

export { TopBar };