"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 my-10">
      <div className="text-2xl font-bold flex flex-col items-center">
        <div>Kategori Satker</div>
        <div>
          <UnderLine />
        </div>
      </div>
      <div className="w-full bg-white rounded-lg">
        <div className="gap-4 grid grid-cols-1 sm:grid-cols-5 w-full bg-white rounded-lg">
          {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>
  );
}