// Generated with util/create-component.js
import React, { useState } from "react";
import { useMobileDetect } from "../../../hooks/useMobileDetect";
import Button from "../../UI/Button";
import Heading from "../../UI/Heading";
import Modal, { ModalBody, ModalHeader } from "../../UI/Modal";
import Text from "../../UI/Text";
import { TipButtonProps } from "./TipButton.types";

const TipButton: React.FC<TipButtonProps> = ({
  buttonType,
  title,
  editorContent,
}) => {
  const { isMobile } = useMobileDetect();
  const [modalVisible, setModalVisible] = useState(false);
  const openModal = () => {
    setModalVisible(true);
  };
  const closeModal = () => {
    setModalVisible(false);
  };

  return (
    <div
      data-testid="TipButton"
      className="nrc--TipButton px-[2rem] py-[1.2rem] pc:max-w-[80rem]"
    >
      <Button
        size="xl"
        type="outline"
        color={buttonType === "tip" ? "blue" : "gray"}
        radius="s"
        className="w-full"
        onClick={openModal}
      >
        <Text
          type="B8"
          className={`${buttonType === "tip" ? "text-blue-7" : "text-gray-10"}`}
        >
          {title}
        </Text>
      </Button>
      <Modal
        drawer={isMobile}
        drawerDirection="bottom"
        modalWidth="w-[80rem]"
        showScroll
        radius="mobile:rounded-t-[15px] pc:rounded-[15px]"
        visible={modalVisible}
        onClose={closeModal}
      >
        <ModalHeader>
          <Heading
            level={4}
            className="px-[2rem] pt-[3rem] text-center text-gray-10 pc:pt-[2rem]"
          >
            {title}
          </Heading>
        </ModalHeader>
        <ModalBody>
          <p
            className="px-[2rem] py-[1rem] text-body-4 text-gray-10"
            dangerouslySetInnerHTML={{
              __html: editorContent,
            }}
          ></p>
        </ModalBody>
      </Modal>
    </div>
  );
};

export default TipButton;