import React, {  useState } from "react";

import "./style.css";


const MessageExamplePositive = (props) => (
  <Home msg={props.msg} />
);

const Home = (props) => {
  const [show, showControl] = useState("1");
  if (show == "1") {
    if (props.msg.includes("Filter") || props.msg.includes("soon")) {
      return (
        <>
          <div className="div-1">
            <div className="div-2">
            <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="#2E9AFE"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className = "svg-1"
        >
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="16" x2="12" y2="12"></line>
          <line x1="12" y1="8" x2="12" y2="8"></line></svg>
              <span className="span">{props.msg}</span>
              <button
                className="button"
                onClick={() => {
                  showControl("0");
                }}
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#FFFFFF"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="svg-2"
                >
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
              </button>
            </div>
          </div>
        </>

      );
    } else {
      return (
        <>
          <div className="div-1">
            <div className="div-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#31B404"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="svg-1"
              >
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                <polyline points="22 4 12 14.01 9 11.01"></polyline>
              </svg>
              <span className="span">{props.msg}</span>
              <button
                className="button"
                onClick={() => {
                  showControl("0");
                }}
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#FFFFFF"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="svg-2"
                >
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
              </button>
            </div>
          </div>
        </>
      );
    }
  } else {
    return <></>;
  }
};

export default MessageExamplePositive;
