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

export default function RegionalNews() {
    const [limitedData, setLimitedData] = useState<any>([]);

    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"
        },
    ];

    // useEffect(() => {
    //     function updateLimitedData() {
    //         if (window.matchMedia("(max-width: 767px)").matches) {
    //             setLimitedData(list.slice(0, 2));
    //         } else if (window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches) {
    //             setLimitedData(list.slice(0, 3));
    //         } else {
    //             setLimitedData(list.slice(0, 5));
    //         }
    //     }

    //     updateLimitedData();
    //     window.addEventListener('resize', updateLimitedData);
    //     return () => {
    //         window.removeEventListener('resize', updateLimitedData);
    //     };
    // }, [list]);

    return (
        <div className='text-center border-3 border-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] py-4  flex flex-col justify-center'>
            <div className='font-bold text-2xl underline underline-offset-4 decoration-red-600 text-[#DD8306]'>Berita Wilayah</div>
            <div className='flex items-center justify-around'>
                <div><ChevronLeftWhite color='orange' /></div>
                <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
                    {list.map((item: any, index: any) => (
                        <div 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-[#DD8306]'>{item.title}</p>
                        </div>
                    ))}
                </div>
                <div><ChevronRightWhite color='orange' /></div>
            </div>
            <div>
                <Button
                    className='bg-[#DD8306] text-white font-bold'
                    size='sm'
                >
                    Lihat Lebih Banyak
                </Button>
            </div>
        </div>
    )
}