import "./ContentCard.scss";
import React from "react";
import { Text } from "components/Typography";
import classNames from "classnames";
import { NotificationIcon } from "components/NotificationMessage";
import { Icon } from "components/Icon";

interface IProps {
  show: boolean;
  handleClose: () => void;
  content: string | React.ReactNode;
  className?: string;
  contentClassName?: string;
  iconSize?: number;
  closeIconSize?: number;
  type: "warning" | "success" | "error";
}

const ContextCard: React.FC<IProps> = ({
  show,
  content,
  className,
  iconSize = 24,
  closeIconSize = 24,
  contentClassName,
  type,
  handleClose,
}) => {
  return (
    <React.Fragment>
      {show && (
        <div
          className={classNames({
            "content-card": true,
            "content-card__warning": type === "warning",
            "content-card__success": type === "success",
            "content-card__error": type === "error",
            [className || ""]: true,
          })}
        >
          <NotificationIcon type={type} width={iconSize} height={iconSize} />
          {typeof content === "string" ? (
            <Text
              preset="regular16"
              className={classNames({
                "content-card__content d--block flex--1": true,
                [contentClassName || ""]: true,
              })}
            >
              {content}
            </Text>
          ) : (
            <div
              className={classNames({
                "content-card__content d--block flex--1": true,
                [contentClassName || ""]: true,
              })}
            >
              {content}
            </div>
          )}
          <span
            className="content-card__close-btn"
            onClick={() => handleClose()}
          >
            <Icon
              className="clickable"
              name="close-outline"
              width={closeIconSize}
              height={closeIconSize}
            />
          </span>
        </div>
      )}
    </React.Fragment>
  );
};

export default ContextCard;
