import React, { ReactNode } from 'react'
import DataCaptureLayout from 'components/DataCaptureComponents/DataCaptureLayout'
import DataCapturePreviewForm from 'components/DataCaptureComponents/DataCaptureModalPreview/DataCaptureModalPreview'
import { Text } from 'components/Typography'

import './index.scss'

interface IProps {
  children: ReactNode
  data?: any
  step?: number
}

const Layout = ({ children, data, step }: IProps) => {
  return (
    <div className="data-capture-form-layout">
      <div className="data-capture-form-layout--left">{children}</div>
      <div className="data-capture-form-layout--right">
        <div className="data-capture-preview">
          <Text preset="semibold18">
            {step === 1 ? 'Module Preview' : 'Form Preview'}
          </Text>
          {step === 1 && (
            <DataCaptureLayout
              layout={data?.layout}
              isDraken={false}
              isImageOn={data?.hasImage}
              image={data?.image}
              isMobile
              title={data?.title}
              subtitle={data?.subTitle}
            />
          )}
          {step === 2 && (
            <div className="data-capture-preview-wrapper">
              <DataCapturePreviewForm
                title={data?.title}
                subtitle={data?.subTitle}
                fields={data?.fields}
                isMobile
              />
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default Layout
