import React, { useState } from "react"
import DatePicker from "react-datepicker";
import * as S from "./styles"
import { DateInputProps } from './interface';

const DateInput:React.FC<DateInputProps> = ({ 
    label, 
    dateFormat, 
    dateSelected, 
    className,
    showTimeSelect,
    timeFormat,
    disabled, 
    onChange 
  }) => {
  const [date, setDate] = useState<Date | null>(dateSelected)
  return (
    <S.Container className={className}>
      <S.Label>{label}</S.Label>
      <DatePicker
        dateFormat={dateFormat}
        selected={date}
        showTimeSelect={showTimeSelect}
        timeFormat={timeFormat}
        disabled={disabled}
        onChange={(date) => {
          setDate(date)
          onChange(date)
        }}
      />
    </S.Container>
  )
}

export default DateInput