import { Pagination, Progress, PaginationItem, PaginationLink, Button } from "reactstrap";
import Sparkline from "@/components/Common/Sparklines";
import { Container, Row, Col, Card, CardHeader, CardBody } from 'reactstrap';
import FlotChart from '@/components/Charts/Flot.js';
import { ChartSpline, ChartArea, ChartBar, ChartBarStacked, ChartDonut, ChartLine, ChartPie } from '@/components/Config/flot.setup.js';
import Datatable from "@/components/Tables/Datatable";

const FaCard = ({ icon }) => {
    const iconName = icon.split('fa-')[1].substring(0, 20)
    return (
        <Col xl={3} lg={4}>
            <div className="card">
                <div className="card-body d-flex align-items-center">
                    <em className={"fa-2x mr-2 " + icon}></em>
                </div>
            </div>
        </Col>
    )
}

function CaseProgress() {
    return (
        <div className="card b">
            <div className="card-body bb">
                <div className="margin-botton-20 text-tahun">
                    <Button className="float-left button-hidden icon-next">
                        <img src="/static/img/previous.png"></img>
                    </Button>
                    <Button className="float-left button-hidden icon-next">
                        <img src="/static/img/next.png"></img>
                    </Button>
                    <b className="text-tahun">Tahun 2022 </b>
                    <Button className="float-right button-hidden icon-eksport">
                        <img src="/static/img/Eksport.png"></img>
                    </Button>
                </div>
                <div className="header-1">
                    <h2 className="card-title-1">Perkembangan</h2>
                </div>
                <div className="w-400">
                    <FlotChart options={ChartBar.options} data={ChartBar.data} className="flot-chart" height="200px" />
                </div>
            </div>
            <div className="card-body">
                <div className="header-1">
                    <h2 className="card-title-1">Rekapitulasi</h2>
                </div>
                <FlotChart options={ChartPie.options} data={ChartPie.data} className="flot-chart" height="250px" />
            </div>
            <div className="card-body">
                <div className="header-1">
                    <h2 className="card-title-1">Laporan Terbaru</h2>
                </div>
                <div>
                    <h5 className="card-title text-left py-2 bg-gray border-radius-login">
                        <b className="f-size">04047803</b> -<b>Universitas Satyagama</b>
                    </h5>
                    <h5 className="card-title text-left py-2 bg-gray border-radius-login">
                        <b className="f-size">04047803</b> -<b>Universitas Satyagama</b>
                    </h5>
                    <h5 className="card-title text-left py-2 bg-gray border-radius-login">
                        <b className="f-size">04047803</b> -<b>Universitas Satyagama</b>
                    </h5>
                </div>
            </div>
        </div >
    );
}

export default CaseProgress;