import { type ReactNode } from 'react';

import Stack from '@material-hu/mui/Stack';

type CertificateConfigurationLayoutProps = {
  /** Form content rendered in the left column. */
  left: ReactNode;
  /** Preview content rendered in the right sticky column. */
  right: ReactNode;
};

const CertificateConfigurationLayout = ({
  left,
  right,
}: CertificateConfigurationLayoutProps) => (
  <Stack
    direction={{ xs: 'column', md: 'row' }}
    sx={{ alignItems: 'flex-start', gap: 2, width: '100%' }}
  >
    <Stack sx={{ flex: 1, gap: 2, width: '100%', minWidth: 0 }}>{left}</Stack>
    <Stack
      sx={{
        flex: 1,
        minWidth: 0,
        position: { md: 'sticky' },
        top: { md: 16 },
        alignSelf: { md: 'flex-start' },
        gap: 2,
        width: '100%',
      }}
    >
      {right}
    </Stack>
  </Stack>
);

export default CertificateConfigurationLayout;
