import { __ } from '@wordpress/i18n';
import { ColorInput, NumberInput } from '@library';

export const NumberStyles = ( { formData, handleChange } ) => {
	return (
		<>
			<ColorInput
				label={ __( 'Text Color', 'tasty-roundups' ) }
				id="tasty-roundups-number-text-color"
				name="tasty_roundups_settings[number_text_color]"
				color={ formData.numberTextColor }
				setColor={ ( color ) => {
					handleChange( 'numberTextColor', color );
				} }
			/>
			<ColorInput
				label={ __( 'Background Color', 'tasty-roundups' ) }
				id="tasty-roundups-number-background-color"
				name="tasty_roundups_settings[number_background_color]"
				color={ formData.numberBackgroundColor }
				setColor={ ( color ) => {
					handleChange( 'numberBackgroundColor', color );
				} }
			/>
			<ColorInput
				label={ __( 'Border Color', 'tasty-roundups' ) }
				id="tasty-roundups-number-border-color"
				name="tasty_roundups_settings[number_border_color]"
				color={ formData.numberBorderColor }
				setColor={ ( color ) => {
					handleChange( 'numberBorderColor', color );
				} }
			/>
			<NumberInput
				label={ __( 'Border Width (px)', 'tasty-roundups' ) }
				id="tasty-roundups-number-border-width"
				name="tasty_roundups_settings[number_border_width]"
				value={ formData.numberBorderWidth }
				setValue={ ( value ) => {
					handleChange( 'numberBorderWidth', value );
				} }
			/>
		</>
	);
};
