// Switcher.js
import Tooltip from '../../../components/core/Tooltip';
import React from 'react';
import { displayProPopup } from '../../../Helper';
import { translate } from '../../../Helper';

const Switcher = ({ id, checked, onChange, label, tooltip, isPro=true }) => (

  <label htmlFor={id} className="btn-switch ecre-inline-flex ecre-items-center ecre-cursor-pointer ecre-mb-2" onClick={ !isPro ? displayProPopup : undefined } >
    <div className="ecre-flex ecre-items-center ecre-relative ecre-mr-2.5">
      <input type="checkbox" id={id} checked={checked} onChange={onChange} className={`ecre-sr-only ecre-peer ${ !isPro ? 'ecre-opacity-50 ecre-bg-gray-200 ' : ''}`}   disabled={!isPro}/>
      <div className="dot-round ecre-bg-slate-200 ecre-w-12 ecre-h-7 ecre-rounded-[500px] ecre-transition peer-[:checked]:ecre-bg-[#6A40D5]"></div>
      <div className="dot ecre-absolute ecre-start-1 ecre-top-1 ecre-bg-transparent ecre-w-5 ecre-h-5 ecre-border-4 ecre-border-solid ecre-border-white ecre-rounded-[500px] ecre-transition-transform peer-checked:ecre-bg-white peer-checked:ecre-translate-x-full rtl:peer-checked:-ecre-translate-x-full"></div>
    </div>
    <div className="ecre-text-black ecre-text-sm ecre-font-medium">
      <span className={`ecre-mr-2.5 ${ !isPro ? 'ecre-opacity-50' : ''}`}>{label}</span>
      {tooltip && <Tooltip className="ecre-align-[-2px] ecre-mr-1" content={tooltip} />}
      {!isPro && (
              <button className='ecre-px-1.5 btn-prolock ecre-border-0 ecre-inline-flex ecre-items-center ecre-pt-[3px] ecre-pb-[4px] ecre-bg-[#fee8fd] ecre-rounded-[26px] ecre-text-[#4d1c4b] ecre-text-sm ecre-font-normal'>
                  <span className="icon-wrap">
                      <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
                          <path d="M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z" fill="#F748F0"/>
                          <path d="M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z" fill="#F748F0"/>
                      </svg>
                  </span>
                  <span className="text">
                      {translate('upgrade')}
                  </span>
            </button>
            )}
    </div>
  </label>
);

export default Switcher;