import { Button, Link, Stack, Typography } from '@mui/material';
import type { LiteralUnion } from 'type-fest';

type ModeType = LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;

type Props = {
  title: string;
  description: string;
  button?: string | React.ReactNode;
  mode?: ModeType;
};

function getHeightStyle(mode: ModeType | undefined): any {
  switch (mode) {
    case 'standalone':
      return { height: '100vh', maxHeight: '100%' }; // 独立模式下，高度为100vh
    default:
      return { height: 'auto', minHeight: 200 }; // 默认情况下，高度根据内容自动调整
  }
}
export default function PaymentError({ title, description, button = 'Back', mode = 'standalone' }: Props) {
  const heightStyle = getHeightStyle(mode);
  return (
    <Stack
      sx={[
        {
          alignItems: 'center',
          justifyContent: 'center',
        },
        ...(Array.isArray(heightStyle) ? heightStyle : [heightStyle]),
      ]}>
      <Stack
        direction="column"
        sx={{
          alignItems: 'center',
          justifyContent: 'center',
          width: '280px',
        }}>
        <Typography variant="h5" sx={{ mb: 2 }}>
          {title}
        </Typography>
        <Typography variant="body1" sx={{ mb: 2, textAlign: 'center' }}>
          {description}
        </Typography>
        {typeof button === 'string' ? (
          <Button
            variant="text"
            size="small"
            sx={{ color: 'text.link' }}
            component={Link}
            href={window.blocklet?.appUrl}>
            {button}
          </Button>
        ) : (
          button
        )}
      </Stack>
    </Stack>
  );
}