import { useState } from 'react';
import { DatePicker } from '@wordpress/components';

const DateField = ({field, value, onChange}) => {
	const [ date, setDate ] = useState( new Date() );
	return (
		<div className="components-base-control" id={field.name}>
			<label className="components-base-control__label">
				{ field.label }
			</label>
			<DatePicker
				currentDate={ date }
				onChange={ onChange }
				help={ field.description }
				value={value??''}
			/>
			{ getDescription(field) }
		</div>
	);
};
const getDescription = (field) => {
	if (!field.description || field.description.length === 0) return;
	return (
		<p className="hint">{field.description}</p>
	)
};

export default DateField;