import { Box, Button } from '@mui/material';

export const YearTabs = ({ selectedYear, onYearChange }) => {
  const currentYear = new Date().getFullYear();

  return (
    <Box
      sx={{
        display: 'flex',
        borderBottom: '1px solid var(--Stroke, rgba(0, 0, 0, 0.1))',
        paddingBottom: '0.5rem',
        marginBottom: '1rem',
        gap: '0.5rem',
      }}
    >
      <Button
        onClick={() => onYearChange(currentYear)}
        variant="text"
        sx={{
          flex: 1,
          textTransform: 'none',
          fontSize: '0.875rem',
          color: selectedYear === currentYear ? '#4A5660' : '#99A1AF',
          borderRadius: 0,
          padding: '0.5rem',
          '&:hover': {
            backgroundColor: 'var(--GreyLight, rgba(243, 243, 245, 1))',
          },
        }}
      >
        Текущий год
      </Button>
      <Button
        onClick={() => onYearChange(currentYear + 1)}
        variant="text"
        sx={{
          flex: 1,
          textTransform: 'none',
          fontSize: '0.875rem',
          color: selectedYear === currentYear + 1 ? '#4A5660' : '#99A1AF',
          borderRadius: 0,
          padding: '0.5rem',
          '&:hover': {
            backgroundColor: 'var(--GreyLight, rgba(243, 243, 245, 1))',
          },
        }}
      >
        Следующий год
      </Button>
    </Box>
  );
};
