'use client'
import { Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react'
import React from 'react'
import { EyeFilledIcon } from '../icons';

export default function RegulationTable() {
    const filters = [
        { label: "Title", value: "title" },
        { label: "Date", value: "date" },
        { label: "Created At", value: "createdAt" },
    ];
    return (
        <div className=' text-black p-1 md:p-2 lg:p-8 space-y-4'>
            <div className='pt-4 space-y-5'>
                <div className='font-semibold text-lg border-b-4 border-red-700 leading-loose'>Regulasi</div>
                <div>
                    <div className="flex flex-col gap-7">
                        <Table
                            color='warning'
                            selectionMode="single"
                            defaultSelectedKeys={["1"]}
                            aria-label="Example static collection table"
                            classNames={{
                                wrapper: "bg-white",
                                base: 'font-bold',
                                td: "font-medium"
                            }}
                        >
                            <TableHeader>
                                <TableColumn className=' bg-[#DD8306] text-white text-sm'>Peraturan Mengenai Keterbukaan Informasi Publik</TableColumn>
                            </TableHeader>
                            <TableBody>
                                <TableRow key="1">
                                    <TableCell className='flex items-center justify-between'>A. Informasi terkait unjuk rasa terutama yang berpotensi anarkis. <EyeFilledIcon color="#DD8306" /></TableCell>
                                </TableRow>
                                <TableRow key="2">
                                    <TableCell className='flex items-center justify-between'>B. Informasi mengenai keamanan dan ketertiban masyarakat terutama yang berpotensi kerusuhan massa. <EyeFilledIcon color="#DD8306" /></TableCell>
                                </TableRow>
                                <TableRow key="3">
                                    <TableCell className='flex items-center justify-between'>C. Informasi terkait bencana alam yang berdampak luas. <EyeFilledIcon color="#DD8306" /></TableCell>
                                </TableRow>
                            </TableBody>
                        </Table>

                        <Table
                            color='warning'
                            selectionMode="single"
                            defaultSelectedKeys={["1"]}
                            aria-label="Example static collection table"
                            classNames={{
                                wrapper: "bg-white",
                                base: 'font-bold',
                                td: "font-medium"
                            }}
                        >
                            <TableHeader>
                                <TableColumn className=' bg-[#DD8306] text-white text-sm'>Peraturan mengenai Keterbukaan Informasi Publik yang dikeluarkan Polri</TableColumn>
                            </TableHeader>
                            <TableBody>
                                <TableRow key="1">
                                    <TableCell className='flex items-center justify-between'>A. Informasi terkait unjuk rasa terutama yang berpotensi anarkis. <EyeFilledIcon color="#DD8306" /></TableCell>
                                </TableRow>
                                <TableRow key="2">
                                    <TableCell className='flex items-center justify-between'>B. Informasi mengenai keamanan dan ketertiban masyarakat terutama yang berpotensi kerusuhan massa. <EyeFilledIcon color="#DD8306" /></TableCell>
                                </TableRow>
                                <TableRow key="3">
                                    <TableCell className='flex items-center justify-between'>C. Informasi terkait bencana alam yang berdampak luas. <EyeFilledIcon color="#DD8306" /></TableCell>
                                </TableRow>
                            </TableBody>
                        </Table>
                    </div>
                </div>
            </div>
        </div>
    )
}