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

export const ButtonStyles = ( { formData, handleChange } ) => {
	return (
		<>
			<ColorInput
				label={ __( 'Text Color', 'tasty-roundups' ) }
				id="tasty-roundups-button-text-color"
				name="tasty_roundups_settings[button_text_color]"
				color={ formData.buttonTextColor }
				setColor={ ( color ) => {
					handleChange( 'buttonTextColor', color );
				} }
			/>
			<ColorInput
				label={ __( 'Background Color', 'tasty-roundups' ) }
				id="tasty-roundups-button-background-color"
				name="tasty_roundups_settings[button_background_color]"
				color={ formData.buttonBackgroundColor }
				setColor={ ( color ) => {
					handleChange( 'buttonBackgroundColor', color );
				} }
			/>
			<NumberInput
				label={ __( 'Border Radius (px)', 'tasty-roundups' ) }
				id="tasty-roundups-button-border-radius"
				name="tasty_roundups_settings[button_border_radius]"
				value={ formData.buttonBorderRadius }
				setValue={ ( value ) => {
					handleChange( 'buttonBorderRadius', value );
				} }
			/>
			<TextInput
				label={ __( 'Default Button Text', 'tasty-roundups' ) }
				id="tasty-roundups-button-default-text"
				name="tasty_roundups_settings[button_text]"
				value={ formData.buttonText }
				setValue={ ( value ) => {
					handleChange( 'buttonText', value );
				} }
			/>
		</>
	);
};
