import { Form } from "antd"
import React from "react"

import FormSection from "../shared/form/ui/form-section"
import FormGroup from "../shared/form/ui/form-group"
import dynamic from "next/dynamic"

interface Props {
  program: any
}

const ProgramPanel = (props: Props) => {
  const { program } = props
  const Preview = dynamic(() => import("@uiw/react-markdown-preview"), { ssr: false })
  return (
    <Form>
      <FormSection>
        <FormGroup title="제목">
          <Form.Item name="subject">
            <span>{program?.subject}</span>
          </Form.Item>
        </FormGroup>
        <FormGroup title="퀴즈단계">
          <Form.Item name="course">
            <span>{program?.course}</span>
          </Form.Item>
        </FormGroup>
        <FormGroup title="설명">
          <Form.Item name="content">
            <Preview source={program?.content} />
          </Form.Item>
        </FormGroup>
      </FormSection>
    </Form>
  )
}

export default React.memo(ProgramPanel)