'use client'
import { Card, CardBody, CardFooter, Image } from '@nextui-org/react';
import React from 'react'
import { UnderLine } from '../icons';

export default function RelatedNews() {
    const list = [
        {
            title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
            img: "/relatedNews.png",
            desc: "$5.50",
        },
        {
            title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
            img: "/headernews.png",
            price: "$3.00",
        },
        {
            title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
            img: "/relatedNews.png",
            desc: "$5.50",
        }, {
            title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
            img: "/relatedNews.png",
            desc: "$5.50",
        },
        {
            title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
            img: "/headernews.png",
            price: "$3.00",
        },
    ];
    return (
        <div className='text-black flex flex-col items-center space-y-10 my-10'>
            <div className='text-2xl font-bold flex flex-col items-center'>
                <div>Kategori Satker</div>
                <div><UnderLine /></div>
            </div>
            <div className='w-[90%] bg-white'>
                <div className="gap-4 grid grid-cols-1 sm:grid-cols-5 w-full bg-white">
                    {list.map((item, index) => (
                        <Card className='bg-white text-black' shadow="sm" key={index} isPressable onPress={() => console.log("item pressed")}>
                            <CardBody className="overflow-visible p-2">
                                <Image
                                    // shadow="sm"
                                    radius="lg"
                                    width="100%"
                                    alt={item.title}
                                    className="w-full object-cover h-[260px]"
                                    src={item.img}
                                />
                                <p className='text-xs pt-2 pl-1'>24/01/2024 14:08 WIB</p>
                            </CardBody>
                            <CardFooter className="text-small text-left p-1 flex flex-col items-start">
                                <b>{item.title}</b>
                                <p className='text-xs  py-2 text-blue-700'>Lihat Selengkapnya</p>
                            </CardFooter>
                        </Card>
                    ))}
                </div>
            </div>
        </div>
    )
}