'use client'
import { Card, CardBody, Tab, Tabs } from "@heroui/react"
import React from 'react'

export default function StatiticAndRecap() {
    return (
        <div className='bg-white text-black p-1 md:p-5 px-0 lg:px-10'>
            <div className='flex justify-center items-center'>
                <div className='pt-4 hidden md:block'><img src="/al.png" alt="" className='' /></div>
                <div className='font-bold text-lg md:text-2xl text-[#DD8306] pl-3'>Statistik / Rekapitulasi</div>
                <div className='hidden md:block absolute  pb-10 pl-[400px]'><img src="/spark.png" alt="" /></div>
            </div>
            <div className='p-1 md:p-3 lg:p-5 bg-[#FFF6E9]  my-4 flex flex-col items-center'>
                <Tabs
                    aria-label="Options" color='warning'
                    classNames={{
                        tabList: " bg-white text-red-500",
                    }}
                >
                    <Tab key="dashboard" title="Dashboard" className='w-full'>
                        <div className='flex flex-col items-center border-2 border-red-900 space-y-5'>
                            <div className='text-xl font-bold text-center pt-3'>Dashboard Statistik / Rekapitulasi PPID Humas Polri</div>
                            <div>
                                <img src="/temp/statistik.png" alt="tabel" />
                            </div>
                            <div className='flex w-full justify-around'>
                                <div className='w-1/2 flex items-center justify-center'>
                                    <img src="/temp/panel.png" alt="panel" />
                                </div>
                                <div className='w-1/2'>
                                    <div>permohonan,pemberituauan</div>
                                    <div>Pelayanan Informasi Publik</div>
                                    <div>Pelayanan Keberatan</div>
                                </div>
                            </div>
                            <div className='flex w-full justify-evenly'>
                                <div>
                                    <img src="/temp/panel.png" alt="" />
                                </div>
                                <div>
                                    <img src="/temp/panel.png" alt="" />
                                </div>
                            </div>
                            <div className='flex w-full justify-evenly'>
                                <div>
                                    <img src="/temp/statistik2.png" alt="" />
                                </div>
                                <div>
                                    <img src="/temp/panel.png" alt="" />
                                </div>
                            </div>
                        </div>
                    </Tab>
                    <Tab key="report" title="Report">
                        <div className='md:flex'>

                        </div>
                    </Tab>
                </Tabs>
            </div>
        </div>
    )
}