import { __ } from "@wordpress/i18n";

const Heading = ({enabled, setEnabled, headingText, enableText}) => {
  return (
    <div className="header container">
      <div className="header_left">
        <h3 className="tabrecall_heading_2">
          {__((headingText ?? "Customize Tab Recall"), "tab-recall")}
        </h3>
        <p className="tabrecall_text tabrecall_text_primary">
          {__("Boost Conversions with Dynamic Tab Alerts", "tab-recall")}
        </p>
      </div>
      <div className="header_right">
        <p className="tabrecall_text tabrecall_text_primary">
          {__((enableText ?? "Enable Tab Recall?"), "tab-recall")}
        </p>
        <div className="header_btn">
          <input 
            type="checkbox" 
            id="switch" 
            checked={enabled}
            onChange={setEnabled && ((e) => setEnabled(e.target.checked))}
            readOnly={!setEnabled}
           />
          <label htmlFor="switch" className="tabrecall_switch"></label>
        </div>
      </div>
    </div>
  );
};

export default Heading;