import { useFormContext } from 'react-hook-form';

import { Box } from 'components/common';
import { Input } from 'components/inputs';
import { inputStyles } from './inputStyles';

export const DateRangeFilter = ({ id }: { id: string }) => {
  const { register } = useFormContext();
  return (
    <Box paddingX={3}>
      <Input
        className="medium"
        style={{ ...inputStyles, borderBottom: 0, borderRadius: '4px 4px 0 0' }}
        title="Start date"
        type="date"
        {...register(id + '[0]')}
      />
      <Input
        className="medium"
        style={{ ...inputStyles, borderTop: 0, borderRadius: '0 0 4px 4px' }}
        title="End date"
        type="date"
        {...register(id + '[1]')}
      />
    </Box>
  );
};