import { Icon } from '@wordpress/components'
import { __ } from '@wordpress/i18n'
import SplitModal from './SplitModal'
import { growthArrow, brandLogo } from '../icons'
import { useGlobalStore } from '../../state/GlobalState'
import Primary from '../buttons/Primary'

export const ProModal = () => (
    <SplitModal
        isOpen={true}
        invertedButtonColor={true}
        onClose={() => useGlobalStore.setState({ currentModal: null })}>
        <div className="px-12">
            <div className="flex space-x-2 items-center mb-10 text-extendify-black">
                {brandLogo}
            </div>
            <h3 className="text-xl">
                {__(
                    'Get unlimited access to all our Pro patterns & layouts',
                    'extendify',
                )}
            </h3>
            <p className="text-sm text-black">
                {__(
                    'Upgrade to Extendify Pro and use all the patterns and layouts you’d like, including our exclusive Pro catalog.',
                    'extendify',
                )}
            </p>
            <div>
                <Primary
                    tagName="a"
                    target="_blank"
                    className="w-48 mt-10 py-3"
                    href={`https://extendify.com/pricing/?utm_source=${window.extendifyData.sdk_partner}&utm_medium=library&utm_campaign=pro-modal&utm_content=upgrade-now`}
                    rel="noreferrer">
                    {__('Upgrade Now', 'extendify')}
                    <Icon icon={growthArrow} size={24} className="-ml-1 mr-1" />
                </Primary>
            </div>
        </div>
        <div className="w-full bg-white flex justify-end">
            <img
                alt={__('Upgrade Now', 'extendify')}
                className="max-w-full"
                src={window.extendifyData.asset_path + '/pro-image.png'}
            />
        </div>
    </SplitModal>
)