import { CheckoutTable, isMobileSafari } from '@blocklet/payment-react';
import Header from '@blocklet/ui-react/lib/Header';
import { Box, Stack } from '@mui/material';

type Props = {
  id: string;
};

export default function PricingTablePage({ id }: Props) {
  const isMobileSafariEnv = isMobileSafari();
  return (
    <Box
      sx={{
        width: '100vw',
        maxHeight: '100vh',
        minHeight: '90vh',
        display: 'flex',
        flexDirection: 'column',
        overflow: isMobileSafariEnv ? 'visible' : 'hidden',
      }}>
      <Header
        meta={undefined}
        addons={undefined}
        sessionManagerProps={undefined}
        homeLink={undefined}
        theme={undefined}
        hideNavMenu={undefined}
        maxWidth={false}
        sx={{ borderBottom: '1px solid', borderColor: 'divider' }}
      />

      <Stack
        sx={{
          pt: {
            xs: 0,
          },
          overflow: {
            xs: isMobileSafariEnv ? 'visible' : 'hidden',
            md: 'hidden',
          },
        }}>
        <CheckoutTable
          id={id}
          mode="standalone"
          theme={{
            sx: {
              overflow: {
                xs: 'auto',
                md: 'hidden',
              },
              display: 'flex',
              flexDirection: 'column',
            },
          }}
        />
      </Stack>
    </Box>
  );
}
