import { IconBulb } from '@material-hu/icons/tabler';
import { Stack, Typography, useTheme } from '@material-hu/mui/index';

import { useLokaliseTranslation } from 'src/utils/i18n';

const ChartFooter = () => {
  const { t } = useLokaliseTranslation('people_experience');
  const theme = useTheme();

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
        p: 2,
      }}
    >
      <IconBulb
        size={20}
        color={theme.palette.new.text.neutral.lighter}
      />
      <Typography sx={{ color: theme.palette.new.text.neutral.lighter }}>
        {t('chart_section_description')}
      </Typography>
    </Stack>
  );
};

export default ChartFooter;
