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

/**
 * Internal Dependencies
 */
import { SelectCard } from '../components/SelectCard';
import { StepTitle } from '../components/StepTitle';
import { DataSharingPanel } from '../components/DataSharingPanel';
import { PREFS } from '../constants';

export function StepWelcome( { state, set, errors } ) {
	return (
		<div className="flex flex-col gap-8">
			<StepTitle
				title={ __( "Let's set up your ads", 'advanced-ads' ) }
				description={ __(
					"We'll help you configure your ad type, first ad, placement, and who should see your ads.",
					'advanced-ads'
				) }
				note={ __(
					'You can change any of these settings later from Advanced Ads.',
					'advanced-ads'
				) }
			/>

			<DataSharingPanel
				state={ state }
				set={ set }
				error={ errors.dataShare }
			/>

			<section className="flex flex-col gap-3">
				<h2 className="m-0 text-[15px] font-semibold">
					{ __(
						'How much control do you want during setup?',
						'advanced-ads'
					) }
				</h2>
				<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
					{ PREFS.map( ( p ) => (
						<SelectCard
							key={ p.id }
							title={ p.title }
							desc={ p.desc }
							badge={ p.badge }
							selected={ state.pref === p.id }
							onClick={ () => set( 'pref', p.id ) }
						/>
					) ) }
				</div>
			</section>
		</div>
	);
}