import Toggle from '../../shared/components/Toggle';
import { TextField, ThemeColorField, SelectField } from '../../shared/components/Fields';
import { THEME_PRESETS } from '../../shared/color';
import { __ } from '@wordpress/i18n';

export default function GeneralPanel( { settings, onChange } ) {
	const themeColor = settings.theme_color || '#c0392b';

	return (
		<>
			<Toggle
				label={ __( 'Show the gift wrap option at checkout', 'rt-gift-wrap-for-woocommerce' ) }
				checked={ !! settings.enabled }
				onChange={ ( value ) => onChange( 'enabled', value ) }
			/>
			<TextField
				label={ __( 'Section Label', 'rt-gift-wrap-for-woocommerce' ) }
				value={ settings.label }
				onChange={ ( value ) => onChange( 'label', value ) }
				help={ __( 'Shown above the gift wrap option on checkout.', 'rt-gift-wrap-for-woocommerce' ) }
			/>

			<SelectField
				label={ __( 'Layout', 'rt-gift-wrap-for-woocommerce' ) }
				help={ __( 'Applies everywhere gift wrap appears — classic checkout and the Checkout block both read this setting.', 'rt-gift-wrap-for-woocommerce' ) }
				value={ settings.layout || 'popup' }
				onChange={ ( value ) => onChange( 'layout', value ) }
				options={ [
					{ value: 'popup', label: __( 'Popup — toggle button that opens a modal', 'rt-gift-wrap-for-woocommerce' ) },
					{ value: 'grid', label: __( 'Grid — options shown directly, no popup', 'rt-gift-wrap-for-woocommerce' ) },
				] }
			/>

			<ThemeColorField
				label={ __( 'Theme colour', 'rt-gift-wrap-for-woocommerce' ) }
				help={ __( 'Pick a preset or a custom colour — the toggle, modal, and buttons at checkout all derive their hover, tint, and glow shades from this one colour.', 'rt-gift-wrap-for-woocommerce' ) }
				value={ themeColor }
				presets={ THEME_PRESETS }
				onChange={ ( value ) => onChange( 'theme_color', value ) }
			/>
		</>
	);
}