/**
 * External Dependencies
 */
import { __ } from '@wordpress/i18n';

/**
 * Internal Dependencies
 */
import { clsx } from '@admin/utils';
import { IconPlaceholder } from './IconPlaceholder';

export function FeatureCard( {
	icon,
	title,
	description,
	variant = 'card',
	locked = false,
} ) {
	if ( variant === 'circle' ) {
		return (
			<div className="flex flex-col items-center gap-3.5">
				<div className="flex size-24 items-center justify-center rounded-full bg-blue-50">
					{ icon }
				</div>
				<h3 className="m-0 text-lg font-light leading-[1.3] text-gray-900">
					{ title }
				</h3>
				<p className="m-0 max-w-3xs text-center text-sm leading-relaxed text-gray-500 text-pretty">
					{ description }
				</p>
			</div>
		);
	}

	if ( variant === 'addon' ) {
		return (
			<div className="flex items-start gap-6 rounded border border-border p-6 hover:border-primary">
				{ icon || <IconPlaceholder className="mt-0.5 size-5" /> }
				<div>
					<div className="mb-2 text-xl font-light leading-tight text-gray-900">
						{ title }
					</div>
					<div className="text-base font-light leading-tight text-gray-500">
						{ description }
					</div>
				</div>
			</div>
		);
	}

	return (
		<div
			className={ clsx(
				'flex flex-col gap-2.5 rounded border border-border p-5.5 pb-6',
				locked && 'bg-gray-50'
			) }
		>
			{ locked ? (
				<div className="flex items-center gap-2">
					{ icon || <IconPlaceholder className="size-6" /> }
					<span className="rounded-[3px] bg-blue-50 px-1.5 py-1 font-mono text-[9px] font-semibold uppercase tracking-[.09em] text-primary">
						{ __( 'Pro', 'advanced-ads' ) }
					</span>
				</div>
			) : (
				icon
			) }
			<h3 className="mt-1 mb-0 text-xl font-light leading-[1.3] text-gray-900">
				{ title }
			</h3>
			<p className="m-0 text-lg font-light leading-relaxed text-gray-500 text-pretty">
				{ description }
			</p>
		</div>
	);
}