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

export default function ENewsPolri() {
    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 md:h-[338px] space-y-7 m-auto md:m-10 flex 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='md:flex space-y-4 md:space-y-0 gap-4'>
                    {eNews.map((data) => (
                        <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>
    )
}