'use client';

import React from 'react';

import { pathsConfig } from '@kit/shared/config';
import { useTranslation } from 'react-i18next';

import { usePersonalAccountData } from '@kit/accounts/hooks/use-personal-account-data';
import { SuccessNotification } from '@kit/notifications/components';

const MembershipConfirmationNotification: React.FC<{
  userId: string;
}> = ({ userId }) => {
  const { t } = useTranslation();

  const { data: accountData } = usePersonalAccountData(userId);

  return (
    <SuccessNotification
      showLogo={false}
      title={t('account:membershipConfirmation:successTitle', {
        firstName: accountData?.name,
        lastName: accountData?.last_name,
      })}
      descriptionKey="account:membershipConfirmation:successDescription"
      buttonProps={{
        buttonTitleKey: 'account:membershipConfirmation:successButton',
        href: pathsConfig.app.home,
      }}
    />
  );
};

export default MembershipConfirmationNotification;