import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';

type SupportBoxProps = {
	button?: React.ReactNode;
	children: React.ReactNode;
	title: string;
};

const SupportBox = ( props: SupportBoxProps ) => {
	const { button = null } = props;
	return (
		<div className="gs-support-box">
			<div className="gs-support-box__inner">
				<div className="gs-support-box__header">
					<h3 className="gs-support-box__title">{ props.title }</h3>
					{ button }
				</div>
				<div className="gs-support-box__content">
					{ props.children }
				</div>
			</div>
		</div>
	);
};

export default function SupportBoxes() {
	return (
		<div className="gs-support-boxes">
			<SupportBox title={ __( 'Technical Support', 'liana-with-growthstack' ) }>
				<p>
					{ __(
						'You can contact our support by email. We respond promptly.',
						'liana-with-growthstack'
					) }
				</p>
				<p>
					<a href="mailto:support@lianatech.com">
						{ __( 'support@lianatech.com', 'liana-with-growthstack' ) }
					</a>
				</p>
			</SupportBox>
			<SupportBox
				button={
					<Button href="#" variant="secondary" target="_blank">
						{ __( 'Visit Help Center', 'liana-with-growthstack' ) }
					</Button>
				}
				title={ __( 'Help Center', 'liana-with-growthstack' ) }
			>
				<p>
					{ __(
						"The support site offers solution-specific FAQs and clear instructions for using our products. You'll also find the latest product updates and new feature announcements.",
						'liana-with-growthstack'
					) }
				</p>
			</SupportBox>
			<SupportBox
				button={
					<Button href="#" variant="secondary" target="_blank">
						{ __( 'Open Form', 'liana-with-growthstack' ) }
					</Button>
				}
				title={ __( 'Contact Form', 'liana-with-growthstack' ) }
			>
				<p>
					{ __(
						"If you're experiencing issues or have questions about our product, please fill out the form. Our support team will review your message and get back to you as soon as possible.",
						'liana-with-growthstack'
					) }
				</p>
			</SupportBox>
		</div>
	);
}