import React from "react";
import classNames from "classnames";
import { Box, BoxProps } from "../Box";
import { bem } from "../../utilities/bem";
import { STATUS_VARIANT } from "../../types";

const cn = "StatusPanel";

export interface StatusPanelProps extends BoxProps {
  variant?: STATUS_VARIANT;
  hoverable?: boolean;
}

const defaultStatusPanelProps: Partial<StatusPanelProps> = {
  variant: STATUS_VARIANT.DEFAULT,
  hoverable: false,
};

const StatusPanel = (props: StatusPanelProps) => {
  const {
    variant = defaultStatusPanelProps.variant,
    hoverable = defaultStatusPanelProps.hoverable,
    className,
    children,
    ...rest
  } = props;

  return (
    <Box className={classNames(bem(cn, { e: "wrapper" }), className)} {...rest}>
      <Box
        className={classNames(
          bem(cn),
          hoverable && bem(cn, { m: "hoverable" }),
          bem(cn, { m: variant }),
        )}
      >
        {children}
      </Box>
      <Box
        className={classNames(
          bem(cn, { e: "accent" }),
          bem(cn, { e: "accent", m: variant }),
        )}
      />
    </Box>
  );
};

StatusPanel.defaultProps = defaultStatusPanelProps;

export { StatusPanel };