import React from 'react';
import { Box, Button, Text } from '@chakra-ui/react';
import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';

interface DateNavigatorProps {
  currentDate: Date;
  onPreviousDate: () => void;
  onNextDate: () => void;
}

const DateNavigator = ({
  currentDate,
  onPreviousDate,
  onNextDate,
}: DateNavigatorProps) => {
  return (
    <Box display='flex' alignItems='center' justifyContent='flex-start' mb='5'>
      <Button onClick={onPreviousDate}>
        <ArrowBackIcon />
      </Button>
      <Text mx='4' fontSize='lg' fontWeight='bold'>
        {currentDate.toLocaleDateString()}
      </Text>
      <Button onClick={onNextDate}>
        <ArrowForwardIcon />
      </Button>
    </Box>
  );
};

export default DateNavigator;
