import React from 'react';
import classNames from 'classnames';

import { Picker, Container } from './styled';

import { DateRangePickerProps } from './types';

const DateRangePicker = ({
  className,
  startPlaceholder = 'Start Date',
  endPlaceholder = 'End Date',
  onChange,
  locale,
  readOnly,
  disabled,
  direction,
  dateFormat,
  initialStartDate,
  initialEndDate,
  format,
  icon,
  prevIcon,
  nextIcon,
  useReactPortal = true,
}: DateRangePickerProps) => (
  <Container className={classNames({ [`${className}-container`]: className })}>
    <Picker
      className={className}
      startPlaceholder={startPlaceholder}
      endPlaceholder={endPlaceholder}
      onChange={onChange}
      locale={locale}
      readOnly={readOnly}
      disabled={disabled}
      direction={direction}
      dateFormat={dateFormat}
      initialStartDate={initialStartDate}
      initialEndDate={initialEndDate}
      format={format}
      icon={icon}
      prevIcon={prevIcon}
      nextIcon={nextIcon}
      portal={useReactPortal}
    />
  </Container>
);

export default DateRangePicker;