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";
import { Link } from "@inertiajs/react";

interface SubKategori {
    SubKategoriId: number;
    NamaSubKategori: string;
}

interface Kategori {
    KategoriId: number;
    NamaKategori: string;
}

interface Post {
    PostId: number;
    JudulPost: string;
    DescPost: string;
    SlugPost: string;
    ImagePost: string;
    IsPublish: boolean;
    created_at: string;
    kategori?: Kategori;
    subkategori?: SubKategori;
}

interface CardUndanganProps {
    undangan: Post[];
}

const UndanganSection = ({ undangan }: CardUndanganProps) => {
    return (
        <section className="container max-w-7xl py-8 px-6">
            <div className="flex items-center mb-6 justify-between">
                <div className="flex flex-col">
                    <Badge className="bg-black inline-block w-fit text-white hover:bg-green-600 cursor-pointer">
                        Informasi
                    </Badge>
                    <h2 className="text-2xl font-bold text-green-800">
                        Undangan
                    </h2>
                </div>
                <Link href="/undangan">
                    <Button
                        variant="link"
                        className="text-green-700 mt-auto pl-0"
                    >
                        Selengkapnya
                    </Button>
                </Link>
            </div>

            {/* List of Announcements */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {undangan.map((item) => (
                    <Card key={item.PostId} className="md:p-4">
                        <img
                            src={`/storage/${item.ImagePost}`}
                            alt={item.JudulPost}
                            className="rounded-md"
                        />
                        <CardContent className="p-4">
                            <Badge className="bg-red-600 text-white">
                                {item.kategori?.NamaKategori}
                            </Badge>
                            <p className="text-gray-500 text-sm mt-2">
                                {new Date(item.created_at).toLocaleDateString(
                                    "id-ID",
                                    {
                                        day: "numeric",
                                        month: "long",
                                        year: "numeric",
                                    }
                                )}
                            </p>
                            <h3 className="text-md font-semibold mt-2 text-gray-900">
                                {item.JudulPost}
                            </h3>
                            <p className="text-sm text-gray-600 mt-2">
                                {item.DescPost.replace(/<[^>]*>/g, "").slice(
                                    0,
                                    160
                                )}
                                ...
                            </p>
                            <Link href={`/undangan/${item.SlugPost}`}>
                                <Button
                                    variant="link"
                                    className="text-red-600 mt-2 pl-0"
                                >
                                    Baca Selengkapnya{" "}
                                    <ArrowRight className="ml-2 w-4 h-4" />
                                </Button>
                            </Link>
                        </CardContent>
                    </Card>
                ))}
            </div>
        </section>
    );
};

export default UndanganSection;