import React, { FC, forwardRef } from "react";
import classNames from "classnames";
import { StatusContext } from "../../contexts/status";
import { Box, BoxProps } from "../Box";
import { Heading } from "../Heading";
import { bem } from "../../utilities/bem";
import { STATUS_VARIANT } from "../../types";
import { StatusIcon } from "../Icon";
import { Flex } from "../Flex";

const cn = "Banner";

export interface BannerProps extends BoxProps {
  title?: string;
  variant?: STATUS_VARIANT;
  withIcon?: boolean;
}

export const Banner: FC<BannerProps> = forwardRef<HTMLDivElement, BannerProps>(
  (props, ref) => {
    const {
      variant = STATUS_VARIANT.DEFAULT,
      title,
      className,
      children,
      withIcon = false,
      ...rest
    } = props;

    const classes = classNames(bem(cn), bem(cn, { m: variant }), className);

    return (
      <StatusContext.Provider value={variant}>
        <Box ref={ref} className={classes} role="alert" {...rest}>
          <Flex>
            {withIcon && <StatusIcon className={bem(cn, { e: "icon" })} />}
            <Box>
              {title && <Heading.H5>{title}</Heading.H5>}
              <Box className={classNames(title && bem(cn, { e: "body" }))}>
                {children}
              </Box>
            </Box>
          </Flex>
        </Box>
      </StatusContext.Provider>
    );
  },
);