import React from 'react';
import styled from 'styled-components';
import { DateTimeInput } from '@descarteslabs/react-ts-widgets';
import { DateTimePropTypes } from './redux';

const Wrapper = styled.div`
  background-color: white;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
`;

const DateTimeSelectorView = ({
    value,
    onSelectChange,
}) => (
    <Wrapper>
        <DateTimeInput date={value} onChange={onSelectChange} />
    </Wrapper>
);

DateTimeSelectorView.propTypes = {
    value: DateTimePropTypes.value.isRequired,
    onSelectChange: DateTimePropTypes.onChange.isRequired,
};

export default DateTimeSelectorView;