import { Stack, Typography, useTheme } from '@mui/material';
import { Profile2User } from 'iconsax-react';
import { useTranslation } from 'react-i18next';

export const AccountCreatedClubBanner = () => {
  const { t } = useTranslation('authentication');
  const theme = useTheme();

  return (
    <Stack direction="row" spacing={2} sx={{ pb: 1 }} alignItems="start">
      {/* FIXME: Replace with Club Logo (this icon is placeholder) */}
      <Profile2User size={80} color={theme.palette.club.main} />

      <Stack spacing={0.5}>
        <Typography variant="h6">{t('accountCreated.harmonyClub')}</Typography>
        <Typography variant="body2">
          {t(
            'accountCreated.encourageYourBusinessCustomersToMakeRepeatPurchasesBySendingThemDiscountCodesAndPoints',
          )}
        </Typography>
      </Stack>
    </Stack>
  );
};
