import React, { useRef, useState } from "react"
import { Card, CardBody, CardHeader, CardTitle } from "reactstrap"
import ChartKpdl from "./componentProgresifitas/ChartKPDL"
import { Stepper } from "primereact/stepper"
import { StepperPanel } from "primereact/stepperpanel"
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" }}>
              <StepperPanel header="Identifikasi Lapangan (KPDL/MATOA)">
                <div className="flex flex-column h-12rem">
                  <div className="font-medium">
                    <ChartKpdl dataSend={dataSend} />
                  </div>
                </div>
              </StepperPanel>
              {/* <StepperPanel header="Aktifitas pasca identifikasi">
                <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>
              <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