export function AddOnCard( { icon, title, description } ) {
	return (
		<div className="flex items-start gap-3 rounded border border-border p-4 hover:border-primary">
			{ icon || (
				<span className="mt-0.5 size-5 flex-none rounded-[3px] border border-dashed border-gray-300 bg-gray-100" />
			) }
			<div>
				<div className="text-sm font-medium leading-[1.3] text-gray-900">
					{ title }
				</div>
				<div className="text-[12.5px] leading-[1.55] text-gray-500">
					{ description }
				</div>
			</div>
		</div>
	);
}