import { ReactNode, useState } from "react";

import "./Banner.css";
import { getCN, usePadding, onLoad, onSkeleton } from "../utils";

import { IconCloseBorder } from "../../svg_icons/IconCloseBorder";

import { IconButton } from "../../index";
import { IButtonTouch } from "../ButtonTouch/ButtonTouch";

interface IBanner extends React.HTMLAttributes<HTMLDivElement> {
  bottom?: React.ReactNode;
  background?: string
  description?: React.ReactNode;
  textWidth?: number | string;
  color?: string;
  maxHeight: string | number;
  after?: React.ReactNode;
  onClose?: IButtonTouch["onClose"];
}

function Banner({
  children,
  bottom,
  background,
  description,
  textWidth = 200,
  color = `var(--text_primary)`,
  maxHeight = `auto`,
  after,
  onClose,
  ...props
}: IBanner) {
  return (
    <div className={getCN(["MYUI-Banner"], props.className)}>
      <div
        style={{
          background: background && `url(${background})`,
          height: maxHeight,
          color: color,
          ...props.style
        }}
        className="MYUI-Banner__background"
      >
        <div className="MYUI-Banner__global" style={{ width: textWidth }}>
          {onClose && (
            <div className="MYUI-Banner__close">
              <IconButton onClick={onClose}>
                <IconCloseBorder fill="white" />
              </IconButton>
            </div>
          )}
          {children && (
            <div className="MYUI-Banner__children" children={children} />
          )}
          {description && (
            <div className="MYUI-Banner__description" children={description} />
          )}
          {bottom && <div className="MYUI-Banner__bottom" children={bottom} />}
          {after && <div className="MYUI-Banner__after" children={after} />}
        </div>
      </div>
    </div>
  );
}

export default Banner;