'use client'
import { Button, Card, CardBody, CardFooter, } from '@nextui-org/react'
import Image from 'next/image';
import React, { useEffect, useState } from 'react'
import { ChevronLeftWhite, ChevronRightIcon } from '../icons';

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

    const eNews = [
        {
            id: 1,
            title: "Tribrata News Edisi 32 /IV-VI/ENews Polri/2024",
            img: "/headernews.png",
        },
        {
            id: 2,
            title: "Tribrata News Edisi 32 /IV-VI/ 2024",
            img: "/headernews.png",
        },
        {
            id: 3,
            title: "Tribrata News Edisi 32 /IV-VI/ 2024",
            img: "/headernews.png",
        },
    ];

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

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

    return (
        <div className='bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-7 flex py-4 flex-col justify-center items-center'>
            <p className='text-white font-bold text-2xl underline underline-offset-4 decoration-red-600'>E-Majalah Polri</p>
            <div className='flex flex-row w-full items-center justify-between'>
                <ChevronLeftWhite />
                <div className='lg:flex space-y-4 lg:space-y-0 gap-1 md:gap-2  lg:gap-8'>
                    {eNews.map((data: any) => (
                        <div key={data.id} className='h-auto md:h-[200px] w-[274px]'>
                            <Card className='text-white'
                                isFooterBlurred
                            >
                                <Image
                                    alt="Woman listing to music"
                                    className="object-cover h-full"
                                    height={100}
                                    src={data.img}
                                    width={100}
                                    layout='responsive'
                                />
                                <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
                                    <p className='text-xs text-left'>{data.title}</p>
                                </CardFooter>
                            </Card>
                        </div>
                    ))}
                </div>
                <ChevronRightIcon color='white' />
            </div>
        </div>
    )
}