import React, { useState } from "react";

import { ReactComponent as InfoIcon } from "icons/info.svg";
import { ReactComponent as CloseIcon } from "icons/close-outline.svg";
import { Paragraph } from "components/Typography";

import "./InfoSection.scss";

interface InfoSectionProps {
  onClose: () => void;
  showClose?: boolean;
  title: string;
  text?: string;
}

export const InfoSection: React.FC<InfoSectionProps> = ({
  children,
  onClose,
  showClose = false,
  title,
  text,
  ...props
}) => {
  const [show, setShow] = useState(true);

  const handleCloseInfo: React.MouseEventHandler = () => {
    setShow(false);
    onClose();
  };

  return show ? (
    <div className="info-section" {...props}>
      <div className="info-section--icon">
        <InfoIcon width={22} height={22} />
      </div>

      <div className="info-section--content">
        <Paragraph className="info-section--title">{title}</Paragraph>
        {text && <Paragraph className="info-section--text">{text}</Paragraph>}
        {children}
      </div>

      {showClose && (
        <CloseIcon
          onClick={handleCloseInfo}
          className="info-section--close"
          width={18}
          height={18}
        />
      )}
    </div>
  ) : null;
};
