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

const announcements = [
    {
        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",
    },
];

const AnnouncementSection = () => {
    return (
        <section className="container max-w-7xl py-8 px-6">
            <div className="flex items-center justify-between mb-6">
                <h2 className="text-2xl font-bold text-green-800">
                    Pengumuman
                </h2>
                <Button variant="link" className="text-green-700">
                    Selengkapnya
                </Button>
            </div>

            {/* Highlight Announcement */}
            <div className="grid grid-cols-1 gap-6 mb-8">
                <Card className="p-4 flex flex-col md:flex-row items-start">
                    <img
                        src={announcements[0].image}
                        alt={announcements[0].alt_image}
                        className="rounded-md w-full md:w-1/2"
                    />
                    <CardContent className="p-4 w-full md:w-1/2">
                        <Badge className="bg-red-600 text-white">
                            {announcements[0].title_page}
                        </Badge>
                        <p className="text-gray-500 text-sm mt-2">
                            {announcements[0].date}
                        </p>
                        <h3 className="text-lg font-semibold mt-2 text-gray-900">
                            {announcements[0].title}
                        </h3>
                        <p className="text-sm text-gray-600 mt-2">
                            {announcements[0].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>

            {/* List of Announcements */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {announcements.map((item) => (
                    <Card key={item.id} className="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>
        </section>
    );
};

export default AnnouncementSection;