import { IconGift } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

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

import { useGetAvailablePoints } from '../../hooks/useGetAvailablePoints';

export const AvailablePointsCard = () => {
  const { t, i18n } = useLokaliseTranslation('acknowledgements');
  const { palette } = useTheme();
  const { availablePoints, isLoading } = useGetAvailablePoints();

  return (
    <CardContainer
      fullWidth
      sx={{ flexShrink: 0 }}
    >
      <Stack sx={{ alignItems: 'center', gap: 2, flexDirection: 'row' }}>
        <Avatar
          Icon={IconGift}
          color="highlight"
          size="large"
        />
        <Stack>
          <Typography
            variant="globalXS"
            sx={{ color: palette.new.text.neutral.lighter }}
          >
            {t('products.your_available_points')}
          </Typography>
          {isLoading && (
            <Skeleton
              width={80}
              height={28}
            />
          )}
          {!isLoading && (
            <Typography
              variant="globalL"
              fontWeight="fontWeightSemiBold"
            >
              {availablePoints.toLocaleString(i18n.language)}
            </Typography>
          )}
        </Stack>
      </Stack>
    </CardContainer>
  );
};