import React, { useRef } from 'react'
import { Card, CardBody, CardHeader, CardTitle, Col, Row } from 'reactstrap'
import { Stepper } from 'primereact/stepper'
import { StepperPanel } from 'primereact/stepperpanel'
import PenugasanKpdl from './componentPenugasanAktifitas/PenugasanKpdl.js'
import PerubahanPerilaku from './componentPenugasanAktifitas/PerubahanPerilaku.js'
import { Height } from '@mui/icons-material'
// const PerubahanPerilaku = lazy(() => import('./componentPenugasanAktifitas/PerubahanPerilaku.js'))
const TabPenugasan = ({ dataSend }) => {
  const stepperRef = useRef(null)
  return (
    <>
      <Card>
        <CardHeader className="d-flex justify-content-center p-2">
          <CardTitle tag={'h1'} className="font-weight-bold">
            Statistik Penugasan Matoa Tahun Berjalan
          </CardTitle>
        </CardHeader>

        <CardBody className="mb-0">
          <div className="card flex justify-content-center">
            <Stepper ref={stepperRef} style={{ flexBasis: '30rem' }} pt={{ nav: { style: { width: '70%' } } }}>
              <StepperPanel header="Identifikasi Lapangan (KPDL/MATOA)">
                <div className="flex flex-column h-12rem">
                  <div className="font-medium">
                    <PenugasanKpdl dataSend={dataSend} />
                  </div>
                </div>
              </StepperPanel>
              <StepperPanel header="Perubahan Perilaku">
                <div className="flex flex-column h-12rem">
                  <div className="font-medium">
                    <PerubahanPerilaku dataSend={dataSend} />
                  </div>
                </div>
              </StepperPanel>
              {/* <StepperPanel header="Hasil pasca aktifitas">
                <div className="flex flex-column h-12rem">
                  <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">
                    OTW
                  </div>
                </div>
              </StepperPanel> */}
            </Stepper>
          </div>
        </CardBody>
      </Card>
    </>
  )
}

export default TabPenugasan