import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Modal } from '@wordpress/components';
import { LifeBuoy, BookOpen, ArrowUpRight } from 'lucide-react';
import ContactForm from './ContactForm';
import './sharedAdmin.scss';

// Documentation URL with static UTM attribution for campaign reporting. We
// deliberately do NOT include the site's URL/host — a plugin transmitting the
// site identity to our server (even on a click) is unnecessary data collection.
const DOCS_URL =
	'https://store-locator.cliqthemes.com/docs?utm_source=store-locator-plugin&utm_medium=plugin&utm_campaign=admin-banner&utm_content=store-locator';

const BannerLinks = ( { upgradeUrl = '' } ) => {
	const [ open, setOpen ] = useState( false );

	return (
		<div className="cliq-sl-bannerlinks">
			<button type="button" className="cliq-sl-bannerlink" onClick={ () => setOpen( true ) }>
				<LifeBuoy size={ 15 } strokeWidth={ 2 } />
				<span>{ __( 'Support', 'cliq-store-locator' ) }</span>
			</button>
			<a className="cliq-sl-bannerlink" href={ DOCS_URL } target="_blank" rel="noreferrer noopener">
				<BookOpen size={ 15 } strokeWidth={ 2 } />
				<span>{ __( 'Documentation', 'cliq-store-locator' ) }</span>
			</a>
			{ upgradeUrl && (
				<a
					className="cliq-sl-bannerlink cliq-sl-bannerlink--upgrade"
					href={ upgradeUrl }
					target="_blank"
					rel="noreferrer noopener"
				>
					<span>{ __( 'Get Pro', 'cliq-store-locator' ) }</span>
					<ArrowUpRight size={ 15 } strokeWidth={ 2.25 } />
				</a>
			) }

			{ open && (
				<Modal
					className="cliq-sl-contact-modal"
					title={ __( 'Contact CliqThemes', 'cliq-store-locator' ) }
					onRequestClose={ () => setOpen( false ) }
				>
					<ContactForm />
				</Modal>
			) }
		</div>
	);
};

export default BannerLinks;
