import { useTranslation } from 'react-i18next';

import { type SxProps, useTheme } from '@mui/material';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

export const SidebarEmpty = ({ sx }: { sx?: SxProps }) => {
  const { t } = useTranslation('material_hu_only');
  const { palette } = useTheme();

  return (
    <Stack
      className="sidebar-empty"
      sx={{
        py: 1.5,
        px: 2.5,
        backgroundColor: 'inherit',
        textAlign: 'center',
        ...sx,
      }}
    >
      <Typography
        variant="globalS"
        color={palette.new.text.neutral.lighter}
      >
        {t('libraries_sidebar.no_articles')}
      </Typography>
    </Stack>
  );
};
