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

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

    return (
        <div className='bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto lg:h-[338px]  flex py-4 flex-col justify-between 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-around'>
                <ChevronLeftWhite />
                <div className='lg:flex space-y-2 lg:space-y-0 gap-1 md:gap-2  lg:gap-8'>
                    {eNews.map((data: any) => (
                        <div key={data.id} className=' w-[274px]'>
                            <Link href={`/e-majalah-polri/detail/${data.id}`}>
                                <Card className='text-white'
                                    isFooterBlurred
                                >
                                    <Image
                                        alt="e-news"
                                        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>
                            </Link>
                        </div>
                    ))}
                </div>
                <ChevronRightIcon color='white' />
            </div>
            <Link className='flex items-center gap-2 text-[#DD8306]' href='/e-majalah-polri/daftar-majalah'>Lihat Semua    <ChevronRightIcon color='[#DD8306]' /></Link>
        </div>
    )
}