"use client"

import "@uiw/react-markdown-preview/markdown.css"
import "@uiw/react-md-editor/markdown-editor.css"
import { Card, Space } from "antd"
import React from "react"
import ProgramPanel from "./ProgramPanel"
import QuizPreviewPanel from "./QuizPreviewPanel"

interface Props {
  program?: any
  quizzes?: any
}

const Preview = (props: Props) => {
  const { program, quizzes } = props

  return (
    <Space direction="vertical" size="middle" style={{ display: "flex" }}>
      <Card>
        <ProgramPanel program={program} />
      </Card>
      <Card>
        <QuizPreviewPanel quizzes={quizzes} />
      </Card>
    </Space>
  )
}

export default React.memo(Preview)
