import {__} from '@wordpress/i18n';
import TextInput from '../components/TextInput';
import './DateRangeConditionField.scss';

/**
 * Value field for the "Published Date" condition - an absolute date range
 * where either side can be left empty for no lower/upper bound.
 */
const DateRangeConditionField = ( {value, onChange} ) => {
	const start = value?.start || '';
	const end = value?.end || '';

	return (
		<div className="adpresso-date-range-condition-field">
			<label className="adpresso-date-range-condition-field__part">
				<span className="adpresso-field-label">{__( 'From', 'adpresso' )}</span>
				<TextInput type="date" value={start} onChange={( newValue ) => onChange( 'start', newValue )}/>
			</label>
			<label className="adpresso-date-range-condition-field__part">
				<span className="adpresso-field-label">{__( 'To', 'adpresso' )}</span>
				<TextInput type="date" value={end} onChange={( newValue ) => onChange( 'end', newValue )}/>
			</label>
		</div>
	);
};

export default DateRangeConditionField;