// React Imports
import React from 'react'

// MUI Imports
import Grid from '@mui/material/Grid2'

// Component Imports
import AppReactDatepicker from '@/libs/styles/AppReactDatepicker'
import CustomTextField from '@core/components/mui/TextField'

// Props Type
type PickerBasicProps = {
  dateFrom: Date | null
  dateTo: Date | null
  onChangeDateFrom: (date: Date | null) => void
  onChangeDateTo: (date: Date | null) => void
  labelFrom?: string
  labelTo?: string
}

const PickerBasic: React.FC<PickerBasicProps> = ({
  dateFrom,
  dateTo,
  onChangeDateFrom,
  onChangeDateTo
}) => {
  return (
    <Grid container spacing={4}>
      <Grid size={{ xs: 12, md: 6 }}>
        <AppReactDatepicker
          selected={dateFrom}
          id='date-from'
          onChange={onChangeDateFrom}
          customInput={
            <CustomTextField
              fullWidth
              className='bg-white rounded-lg shadow-sm border border-gray-300'
            />
          }
        />
      </Grid>

      <Grid size={{ xs: 12, md: 6 }}>
        <AppReactDatepicker
          selected={dateTo}
          id='date-to'
          onChange={onChangeDateTo}
          customInput={
            <CustomTextField
              fullWidth
              className='bg-white rounded-lg shadow-sm border border-gray-300'
            />
          }
        />
      </Grid>
    </Grid>
  )
}

export default PickerBasic
