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, FileText } from "lucide-react";

const regulations = [
    {
        id: 1,
        title_page: "Peraturan",
        alt_image: "Peraturan",
        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: "Peraturan",
        alt_image: "Peraturan",
        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 RegulationSection = () => {
    return (
        <section className="relative w-full py-8 px-6">
            {/* Background Green Box */}
            <div className="absolute top-0 left-0 h-[600px] md:h-full w-full md:w-1/3 bg-green-800 rounded-br-[30px] md:rounded-tr-[30px] md:rounded-br-[30px] -z-10"></div>

            <div className="md:container md:max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 items-start relative">
                {/* Green Info Box */}
                <div className=" text-white md:p-6 rounded-lg flex flex-col items-center md:items-start relative z-10 h-full justify-center">
                    <div className="bg-[#67bb6e] p-4 w-32 h-32 rounded-lg flex items-center justify-center mb-6">
                        <FileText className="w-24 h-24 text-white" />
                    </div>
                    <Badge className="bg-black text-white hover:bg-green-600 cursor-pointer">
                        Informasi
                    </Badge>
                    <h2 className="text-2xl font-bold">Peraturan</h2>
                    <p className="text-sm text-[#94bb98] mt-2 text-center md:text-left">
                        Kegiatan Pelatihan Dan Uji Sertifikasi Tersebut Akan
                        Diselenggarakan Sebagaimana Jadwal Terlampir, Kegiatan
                        Tersebut Bekerjasama Dengan Lembaga P...
                    </p>
                    <Button variant="link" className="text-white mt-4 pl-0">
                        Selengkapnya
                    </Button>
                </div>

                {/* List of Regulations */}
                <div className="col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6 relative z-10">
                    {regulations.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>
        </section>
    );
};

export default RegulationSection;