import React, { useState } from 'react';
import Datepicker from './datepicker';

const TableDatepicker = () => {
    const [dateOne, setDateOne] = useState(new Date());
    const [dateTwo, setDateTwo] = useState(new Date());
    const [dateThree, setDateThree] = useState(new Date());
    const handleOnChangeDateOne = (date) => {
	setDateOne((dateOne)=>date);
    };
    const handleOnChangeDateTwo = (date) => {
	setDateTwo((dateTwo)=>date);
    };
    const handleOnChangeDateThree = (date) => {
	setDateThree((dateThree)=>date);
    };
    return (
	<table>
	    <thead>
		<tr>
		    <th>
			date 1:
			<Datepicker
			    date={dateOne}
			    onChange={handleOnChangeDateOne}
			/>
		    </th>
		    <th>date 2:
			<Datepicker
			    date={dateTwo}
			    onChange={handleOnChangeDateTwo}
			/>
		    </th>
		    <th>date 3:
			<Datepicker
			    date={dateThree}
			    onChange={handleOnChangeDateThree}
			/>
		    </th>
		</tr>
	    </thead>
	    <tbody>
		<tr>
		    <td>{dateOne.toDateString()}</td>
		    <td>{dateTwo.toDateString()}</td>
		    <td>{dateThree.toDateString()}</td>
		</tr>
		<tr>
		    <td>{dateOne.getTime()}</td>
		    <td>{dateTwo.getTime()}</td>
		    <td>{dateThree.getTime()}</td>
		</tr>
	    </tbody>
	</table>
    );
};

export default TableDatepicker;
