import { Typography } from '@mui/material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';

interface SubscriptionDisclaimerProps {
  mode: string;
  subscription: {
    confirmMessage: string;
    showStake: boolean;
  } | null;
  staking: string | null;
  appName: string;
}

export default function SubscriptionDisclaimer({ mode, subscription, staking, appName }: SubscriptionDisclaimerProps) {
  const { t } = useLocaleContext();

  if (!['subscription', 'setup'].includes(mode) || !subscription) return null;

  return (
    <Typography sx={{ mt: 2.5, color: 'text.secondary', fontSize: '0.7875rem', lineHeight: '0.9625rem' }}>
      {subscription.confirmMessage ||
        (subscription.showStake && staking
          ? t('payment.checkout.confirm.withStake', { payee: appName || 'New Payment Kit' })
          : t('payment.checkout.confirm.withoutStake', { payee: appName || 'New Payment Kit' }))}
    </Typography>
  );
}