import { Button } from '@nextui-org/button';
import { Image } from '@nextui-org/react';
import { ChevronLeftWhite, ChevronRightWhite } from '../icons';

export default function CategorySatker() {
    const list = [
        {
            img: "/temp/poldametro.svg",
            title: "Polda Metro Jaya"
        },
        {
            img: "/temp/polda-sumut.svg",
            title: "Polda Sumatra Utara"
        },
        {
            img: "/temp/polda-banten.svg",
            title: "Polda Banten"
        },
        {
            img: "/temp/polda-jateng.svg",
            title: "Polda Jawa Tengah"
        },
        {
            img: "/temp/polda-jatim.svg",
            title: "Polda Jawa Timur"
        },
    ];
    return (
        <div className='text-center bg-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-7 m-auto md:m-10 flex flex-col justify-center border-2 border-green-500'>
            <div className='text-white font-bold text-2xl underline underline-offset-4 decoration-red-600'>Kategori Satker</div>
            <div className='flex items-center justify-around'>
                <div><ChevronLeftWhite /></div>
                <div className="gap-2 md:gap-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
                    {list.map((item, index) => (
                        <div key={index} className='w-[157px] h-[141px] flex flex-col items-center justify-evenly'>
                            <Image
                                radius="lg"
                                className="h-[59px]"
                                src={item.img}
                            />
                            <p className='text-xs font-bold text-white'>{item.title}</p>
                        </div>
                    ))}
                </div>
                <div><ChevronRightWhite /></div>
            </div>
            <div>
                <Button
                    className='bg-white text-[#DD8306] font-bold'
                    size='sm'
                >
                    Lihat Lebih Banyak
                </Button>
            </div>
        </div>
    )
}