import React from "react";
import img from "../../../assets/images/happy-celebrate.png";
import styled from "styled-components";
import ButtonComponent from "../../button";
import classNames from "classnames";

const InstructorMessage = ({
  messsage,
  messsageHTML,
  disabled,
  btnText = "Upgrade",
  onClick,
  hideBtn,
  title,
  titleColor,
  bgColor,
  icon,
  isPendingDelete,
}) => {
  return (
    <Container
      $bgColor={bgColor}
      className={classNames({
        "pending-delete_upgrade": isPendingDelete,
      })}
    >
      <ImageSection>
        <img src={icon || img} alt="" />
      </ImageSection>
      <Bottom $titleColor={titleColor}>
        {title && <h2>{title}</h2>}
        {messsageHTML ? (
          <p dangerouslySetInnerHTML={{ __html: messsageHTML }}>{messsage}</p>
        ) : (
          <p>{messsage}</p>
        )}
        {!hideBtn && (
          <div>
            <ButtonComponent
              disabled={disabled || isPendingDelete}
              type="primary"
              text={btnText}
              onClick={onClick}
              styles={{
                marginTop: "14px",
                fontSize: "12px",
                width: "100%",
                gap: "8px",
                padding: "15.457px 30.913px",
                height: "38.641px",
                boxShadow: isPendingDelete
                  ? undefined
                  : "0px 7.728px 15.457px 0px rgba(254, 191, 16, 0.25)",
              }}
            />
          </div>
        )}
      </Bottom>
    </Container>
  );
};

export default InstructorMessage;

const Container = styled.div`
  border-radius: 23.185px;
  background: ${(props) => props.$bgColor || "#f5f7f7"};
  width: 100%;
  text-align: center;

  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  &.pending-delete_upgrade {
    opacity: 0.5;
  }
`;

const ImageSection = styled.div`
  position: relative;
  height: 96px;
  width: 100%;
  img {
    position: absolute;
    bottom: 0;
    left: 45%;
    transform: translateX(-50%);
    width: 91px;
    height: 91px;
    object-fit: contain;
  }
`;
const Bottom = styled.div`
  > h2 {
    color: ${(props) => props.$titleColor || "#00c2c2"};
    font-size: 14px;
    margin-bottom: 5px;
    letter-spacing: 0.7728px;
  }
  > p {
    color: #4a4d4d;
    font-size: 11.592px;
    letter-spacing: 0.7728px;
    width: 100%;
    max-width: 170px;
    margin: 0 auto;
    span {
      color: #febf10;
      font-weight: 600;
    }
  }
  button {
    &:disabled {
      background: #949999;
    }
  }
`;
