import { Trans } from 'react-i18next';

import { Stack, Typography } from '@mui/material';

import InstanceCard from '../components/InstanceCard';

import { type OTPLayoutProps } from './types';

const OTPLayout = ({ instanceCardProps, title, children }: OTPLayoutProps) => {
  return (
    <Stack sx={{ gap: 5 }}>
      <InstanceCard {...instanceCardProps} />
      <Stack sx={{ gap: 3 }}>
        <Typography variant="globalM">
          <Trans
            i18nKey={title}
            components={{ strong: <strong /> }}
          />
        </Typography>
        {children}
      </Stack>
    </Stack>
  );
};

export default OTPLayout;