import { type ReactNode } from 'react';

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import Title from '@material-hu/components/design-system/Title';

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

type KudosPointsCardContainerProps = {
  children: ReactNode;
};

export const KudosPointsCardContainer = ({
  children,
}: KudosPointsCardContainerProps) => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const { palette } = useTheme();

  return (
    <CardContainer
      sx={{ maxWidth: 450 }}
      fullWidth
    >
      <Stack sx={{ gap: 2 }}>
        <Title
          variant="S"
          fontWeight="fontWeightSemiBold"
          title={t('products.my_points')}
          slotProps={{
            title: { sx: { color: palette.new.text.neutral.lighter } },
          }}
        />
        {children}
      </Stack>
    </CardContainer>
  );
};
