import React from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { ArrowRight } from "lucide-react";

const pengumumans = [
    {
        id: 1,
        title_page: "Pengumuman",
        alt_image: "Pengumuman",
        date: "16 Januari 2025",
        title: "Pelatihan & Sertifikasi Online Bidang Pengendalian Pencemaran Air Dan Udara",
        description:
            "Kegiatan Pelatihan Dan Uji Sertifikasi Tersebut Akan Diselenggarakan Sebagaimana Jadwal Terlampir, Kegiatan Tersebut Bekerjasama Dengan Lembaga P...",
        image: "/assets/img1.jpg",
    },
    {
        id: 2,
        title_page: "Pengumuman",
        alt_image: "Pengumuman",
        date: "12 Desember 2024",
        title: "Pembinaan Pelaporan secara Online Pengelolaan Lingkungan melalui situs Status Ketaatan Lingkungan (SKL)",
        description:
            "Sukolompok Pengawasan Lingkungan Bidang Pengawasan dan Penataan Hukum Dinas Lingkungan Hidup Prov. DKI Jakarta...",
        image: "/assets/img1.jpg",
    },
    {
        id: 3,
        title_page: "Pengumuman",
        alt_image: "Pengumuman",
        date: "12 Desember 2024",
        title: "Pembinaan Pelaporan secara Online Pengelolaan Lingkungan melalui situs Status Ketaatan Lingkungan (SKL)",
        description:
            "Sukolompok Pengawasan Lingkungan Bidang Pengawasan dan Penataan Hukum Dinas Lingkungan Hidup Prov. DKI Jakarta...",
        image: "/assets/img1.jpg",
    },
    {
        id: 4,
        title_page: "Pengumuman",
        alt_image: "Pengumuman",
        date: "12 Desember 2024",
        title: "Pembinaan Pelaporan secara Online Pengelolaan Lingkungan melalui situs Status Ketaatan Lingkungan (SKL)",
        description:
            "Sukolompok Pengawasan Lingkungan Bidang Pengawasan dan Penataan Hukum Dinas Lingkungan Hidup Prov. DKI Jakarta...",
        image: "/assets/img1.jpg",
    },
    {
        id: 5,
        title_page: "Pengumuman",
        alt_image: "Pengumuman",
        date: "12 Desember 2024",
        title: "Pembinaan Pelaporan secara Online Pengelolaan Lingkungan melalui situs Status Ketaatan Lingkungan (SKL)",
        description:
            "Sukolompok Pengawasan Lingkungan Bidang Pengawasan dan Penataan Hukum Dinas Lingkungan Hidup Prov. DKI Jakarta...",
        image: "/assets/img1.jpg",
    },
    {
        id: 6,
        title_page: "Pengumuman",
        alt_image: "Pengumuman",
        date: "12 Desember 2024",
        title: "Pembinaan Pelaporan secara Online Pengelolaan Lingkungan melalui situs Status Ketaatan Lingkungan (SKL)",
        description:
            "Sukolompok Pengawasan Lingkungan Bidang Pengawasan dan Penataan Hukum Dinas Lingkungan Hidup Prov. DKI Jakarta...",
        image: "/assets/img1.jpg",
    },
];

const CardPengumuman = () => {
    return (
        <section className="container max-w-7xl py-8 px-6">
            {/* List of Announcements */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {pengumumans.map((item) => (
                    <Card key={item.id} className="md:p-4">
                        <img
                            src={item.image}
                            alt={item.alt_image}
                            className="rounded-md"
                        />
                        <CardContent className="p-4">
                            <Badge className="bg-red-600 text-white">
                                {item.title_page}
                            </Badge>
                            <p className="text-gray-500 text-sm mt-2">
                                {item.date}
                            </p>
                            <h3 className="text-md font-semibold mt-2 text-gray-900">
                                {item.title}
                            </h3>
                            <p className="text-sm text-gray-600 mt-2">
                                {item.description}
                            </p>
                            <Button
                                variant="link"
                                className="text-red-600 mt-2 pl-0"
                            >
                                Baca Selengkapnya{" "}
                                <ArrowRight className="ml-2 w-4 h-4" />
                            </Button>
                        </CardContent>
                    </Card>
                ))}
            </div>
            <div className="flex justify-center mt-8">
                <Button variant="link" className="text-green-700">
                    Lihat Lebih Banyak
                </Button>
            </div>
        </section>
    );
};

export default CardPengumuman;