import React from 'react';
import { components } from 'react-select';
import { displayProPopup, translate } from '../../Helper';

const CustomOption = (props) => {
    return (
        <components.Option {...props}>
            {props.data.icon && <span className="icon">{props.data.icon}</span>} {props.data.label} 

            <button className='ecre-px-1.5 btn-prolock ecre-cursor-pointer 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 ' onClick={displayProPopup}>
                    <span className="icon-wrap ecre-leading-[1]">
                        <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>
        </components.Option>
    );
};

export default CustomOption;