import HelpOutline from '@mui/icons-material/HelpOutline';
import { Stack, Tooltip, Typography } from '@mui/material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { formatTrialText, whiteTooltipSx } from '../../utils/format';

interface StakingBreakdownProps {
  staking: string;
  paymentAmount: string;
  trialActive: boolean;
  trialDays: number;
  afterTrialInterval: string | null;
}

export default function StakingBreakdown({
  staking,
  paymentAmount,
  trialActive,
  trialDays,
  afterTrialInterval,
}: StakingBreakdownProps) {
  const { t } = useLocaleContext();

  return (
    <Stack spacing={1} sx={{ mb: 1 }}>
      <Stack direction="row" justifyContent="space-between" alignItems="center">
        <Stack direction="row" spacing={0.5} alignItems="center">
          <Typography sx={{ color: 'text.secondary', fontSize: 14 }}>
            {t('payment.checkout.paymentRequired')}
          </Typography>
          <Tooltip
            title={t('payment.checkout.stakingConfirm')}
            placement="top"
            arrow
            slotProps={{ popper: { sx: whiteTooltipSx } }}>
            <HelpOutline sx={{ fontSize: 16, color: 'text.disabled' }} />
          </Tooltip>
        </Stack>
        <Typography>
          {trialActive ? formatTrialText(t, trialDays, afterTrialInterval || 'day') : paymentAmount}
        </Typography>
      </Stack>
      <Stack direction="row" justifyContent="space-between" alignItems="center">
        <Stack direction="row" spacing={0.5} alignItems="center">
          <Typography sx={{ color: 'text.secondary', fontSize: 14 }}>{t('payment.checkout.staking.title')}</Typography>
          <Tooltip
            title={t('payment.checkout.staking.tooltip')}
            placement="top"
            arrow
            slotProps={{ popper: { sx: whiteTooltipSx } }}>
            <HelpOutline sx={{ fontSize: 16, color: 'text.disabled' }} />
          </Tooltip>
        </Stack>
        <Typography>{staking}</Typography>
      </Stack>
    </Stack>
  );
}