'use client'
import { Card, CardBody, Tab, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, getKeyValue } from '@nextui-org/react'
import React from 'react'
import { Checklist, EyeFilledIcon } from '../icons'

export default function AnnualReport() {

    const tableData = [
        {
            key: "1",
            tahun: "2024",
            download: <Checklist />
        },
        {
            key: "2",
            tahun: "2023",
            download: <Checklist />
        },
        {
            key: "3",
            tahun: "2022",
            download: <Checklist />
        },
        {
            key: "4",
            tahun: "2021",
            download: <Checklist />
        },
    ];

    const header = [
        {
            key: "tahun",
            label: "Tahun",
        },
        {
            key: "download",
            label: "Download"
        }
    ]
    return (
        <div className='bg-white text-black p-1 md:p-5'>
            <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'>Laporan Layanan Informasi Publik Tahunan</div>
                <div className='hidden md:block absolute  pb-10 pl-[690px]'><img src="/spark.png" alt="" /></div>
            </div>
            <div className='p-1 md:p-3 lg:p-5 bg-[#FFF6E9] mx-1 md:mx-3 lg:mx-10 my-4 flex flex-col items-center space-y-5'>
                <div>
                    Laporan Tahunan Pejabat Pengelola Informasi dan Dokumentasi (PPID) Humas Polri merupakan kinerja PPID Utama dalam memberikan layanan informasi publik kepada masyarakat.
                </div>
                <div className='border-2 w-full'>
                    <Table
                        color='warning'
                        selectionMode="single"
                        defaultSelectedKeys={["1"]}
                        aria-label="Example static collection table"
                        classNames={{
                            wrapper: "bg-white",
                            base: 'font-bold',
                            td: "font-medium"
                        }}
                    >
                        {/* <TableHeader className='border-2 border-red-600'>
                            <TableColumn className=' bg-[#DD8306] text-white text-sm w-full'>Tahun</TableColumn>
                            <TableColumn className=' bg-[#DD8306] text-white text-sm'>Download</TableColumn>
                        </TableHeader> */}
                        <TableHeader columns={header}>
                            {(column) => <TableColumn className=' bg-[#DD8306] text-white text-sm w-full' key={column.key}>{column.label}</TableColumn>}
                        </TableHeader>
                        {/* <TableRow key="1">
                                <TableCell className=''>2024</TableCell>
                                <TableCell className='text-center flex justify-center'><Checklist /></TableCell>
                            </TableRow>
                            <TableRow key="2">
                                <TableCell className='flex items-center justify-between'>2023</TableCell>
                                <TableCell>ceklis</TableCell>
                            </TableRow> */}
                        <TableBody items={tableData}>
                            {(item) => (
                                <TableRow key={item.key}>
                                    {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>
        </div>
    )
}