text: import React from 'react';
  import {
    Box, FormControl, FormLabel,
  } from '@chakra-ui/react';
  import 'react-datepicker/dist/react-datepicker.css';
  import { useTranslation } from 'react-i18next';
  
  import DatePicker from '../../common/DatePicker';
  import Tooltip from '../../common/Tooltip';
  
  const ModifiedDateFilter = ({ modifiedDateRange, setModifiedDateRange, ...style }) => {
    const { t } = useTranslation();
    const modifiedDateRangeT = t('cve-search.modified-date-range-title');
    const modifiedDateExplanationT = t('cve-search.modified-date-range-explanation');
    const modifiedStartDateT = t('cve-search.modified-start-date');
    const modifiedEndDateT = t('cve-search.modified-end-date');
  
    const { startDate, endDate } = modifiedDateRange;
    const setStartDate = (newStartDate) => {
      setModifiedDateRange((prev) => ({ ...prev, startDate: newStartDate }));
    };
    const setEndDate = (newEndDate) => {
      setModifiedDateRange((prev) => ({ ...prev, endDate: newEndDate }));
    };
  
    return (
      <Box as="form" autoComplete="off" {...style}>
        <Tooltip title={modifiedDateRangeT} message={modifiedDateExplanationT} />
        <FormControl mt={4} mx="auto" maxW="400px">
          <FormLabel htmlFor="modified-date">{modifiedStartDateT}</FormLabel>
          <DatePicker
            id="modified-start-date"
            selectedDate={startDate}
            onChange={(date) => setStartDate(date)}
            showPopperArrow
          />
        </FormControl>
        <FormControl mt={4} mx="auto" maxW="400px">
          <FormLabel htmlFor="modified-date">{modifiedEndDateT}</FormLabel>
          <DatePicker
            id="modified-end-date"
            selectedDate={endDate}
            onChange={(date) => setEndDate(date)}
            showPopperArrow
          />
        </FormControl>
      </Box>
    );
  };
  
  export default ModifiedDateFilter;
  