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

export const BlockStyles = ( { formData, handleChange } ) => {
	return (
		<>
			<ColorInput
				label={ __( 'Background Color', 'tasty-roundups' ) }
				id="tasty-roundups-block-background-color"
				name="tasty_roundups_settings[block_background_color]"
				color={ formData.blockBackgroundColor }
				setColor={ ( color ) => {
					handleChange( 'blockBackgroundColor', color );
				} }
			/>
			<ColorInput
				label={ __( 'Border Color', 'tasty-roundups' ) }
				id="tasty-roundups-block-border-color"
				name="tasty_roundups_settings[block_border_color]"
				color={ formData.blockBorderColor }
				setColor={ ( color ) => {
					handleChange( 'blockBorderColor', color );
				} }
			/>
			<NumberInput
				label={ __( 'Border Width (px)', 'tasty-roundups' ) }
				id="tasty-roundups-block-border-width"
				name="tasty_roundups_settings[block_border_width]"
				value={ formData.blockBorderWidth }
				setValue={ ( value ) => {
					handleChange( 'blockBorderWidth', value );
				} }
			/>
			<NumberInput
				label={ __( 'Border Radius (px)', 'tasty-roundups' ) }
				id="tasty-roundups-block-border-radius"
				name="tasty_roundups_settings[block_border_radius]"
				value={ formData.blockBorderRadius }
				setValue={ ( value ) => {
					handleChange( 'blockBorderRadius', value );
				} }
			/>
		</>
	);
};
