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

const DateTimeField = ({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>
			<DateTimePicker
				currentDate={ date }
				onChange={ onChange }
				label={ field.label }
				help={ field.description }
				value={value??''}
				is12Hour={ true }
			/>
			{ getDescription(field) }
		</div>
	);
};

const getDescription = (field) => {
	if (!field.description || field.description.length === 0) return;
	return (
		<p className="hint">{field.description}</p>
	)
};

export default DateTimeField;