import React, { ButtonHTMLAttributes } from "react";
import classNames from "classnames";
import { bem } from "../../utilities/bem";
import { Stack, StackProps } from "../Stack";
import { Box } from "../Box";

const cn = "Tab";

export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  active?: boolean;
}

export const TabGroup = ({ className, spacing, ...rest }: StackProps) => (
  <Stack
    className={classNames(bem(cn, { e: "group" }), className)}
    spacing={0}
    {...rest}
  />
);

export const Tab = ({ active, children, className, ...rest }: TabProps) => {
  return (
    <button
      className={classNames(
        bem(cn),
        active && bem(cn, { m: "active" }),
        className,
      )}
      type="button"
      {...rest}
    >
      {children}
      {active && <Box as="span" className={bem(cn, { e: "border" })} />}
    </button>
  );
};

Tab.Group = TabGroup;