import { FunctionComponent, ReactNode } from 'react';
import { Paper, Stack, Typography } from '@mui/material';
import AppIcon from '@/components/common/AppIcon';

export interface PaymentStateCardProps {
  /** AppIcon registry name. */
  icon: string;
  /** A `--bal-*` token (or MUI palette reference) — never a hard-coded hex. */
  tone: string;
  /** Already-translated title. */
  title: string;
  /** Already-translated body. */
  body?: string;
  /** Actions/badges/spinners below the body (e.g. an `AppButton`, a `PaymentStatusBadge`, a `CircularProgress`). */
  children?: ReactNode;
}

/**
 * The one terminal/wait-state card for the card and BNPL payment flows — replaces the four copy-pasted
 * private `MessageCard`/`StateCard` functions (`checkout/page.tsx` + `bnpl/page.tsx`,
 * `checkout/return/page.tsx` + `bnpl/return/page.tsx`) so the two flows can no longer visually drift.
 * Presentational, caller-owned i18n; `children` is the actions slot (a single CTA or a stack of them).
 * `aria-live="polite"` — this card also carries the payment-status-poll's pending→succeeded/failed
 * transition (money's most anxious wait), so the outcome is announced without the user re-focusing it.
 * @component PaymentStateCard
 */
const PaymentStateCard: FunctionComponent<PaymentStateCardProps> = ({ icon, tone, title, body, children }) => (
  <Paper
    elevation={0}
    data-payment-state-card
    aria-live="polite"
    sx={{ p: 4, textAlign: 'center', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}
  >
    <Stack sx={{ gap: 1.5, alignItems: 'center' }}>
      <AppIcon icon={icon} size={44} color={tone} />
      <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
        {title}
      </Typography>
      {body ? (
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {body}
        </Typography>
      ) : null}
      {children}
    </Stack>
  </Paper>
);

export default PaymentStateCard;
