import { MouseEvent } from "react";
import { Icon } from "react-feather";

import classNames from "@calcom/lib/classNames";

import Button from "./Button";

const stylesByVariant = {
  neutral: { background: "bg-gray-100 ", text: "!text-gray-800", hover: "hover:!bg-gray-200" },
  warning: { background: "bg-orange-100 ", text: "!text-orange-800", hover: "hover:!bg-orange-200" },
  error: { background: "bg-red-100 ", text: "!text-red-800", hover: "hover:!bg-red-200" },
};

export type BannerProps = {
  title: string;
  description?: string;
  variant: keyof typeof stylesByVariant;
  errorMessage?: string;
  Icon?: Icon;
  onDismiss: (event: MouseEvent<HTMLElement, MouseEvent>) => void;
  onAction?: (event: MouseEvent<HTMLElement, MouseEvent>) => void;
  actionText?: string;
} & JSX.IntrinsicElements["div"];

const Banner = (props: BannerProps) => {
  const { variant, errorMessage, title, description, ...rest } = props;
  const buttonStyle = classNames(stylesByVariant[variant].text, stylesByVariant[variant].hover);
  return (
    <div
      className={classNames(
        "flex items-center rounded-md px-4 py-4",
        stylesByVariant[variant].background,
        stylesByVariant[variant].text,
        props.className
      )}
      {...rest}>
      <div className={classNames("flex flex-row text-sm")}>
        <div className="mr-3">{props.Icon && <props.Icon className="h-4 w-4" />}</div>
        <div className="flex flex-col space-y-2">
          <h1 className="font-semibold leading-none">{title}</h1>
          {description && <h2 className="font-normal leading-none">{description}</h2>}
          {props.variant === "error" && <p className="ml-4 pt-2 font-mono text-xs">{errorMessage}</p>}
        </div>
      </div>
      <div className="ml-auto self-start text-sm font-medium">
        {props.actionText && (
          <Button color="minimal" className={buttonStyle} onClick={() => props.onAction}>
            Action
          </Button>
        )}
        <Button color="minimal" className={buttonStyle} onClick={() => props.onDismiss}>
          Dismiss
        </Button>
      </div>
    </div>
  );
};

export default Banner;