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";
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 CardPengumumanProps {
    posts: Post[];
}

const AnnouncementSection = ({ posts }: CardPengumumanProps) => {
    return (
        <section className="container max-w-7xl py-8 px-6">
            <Badge className="bg-black text-white hover:bg-green-600 cursor-pointer">
                Informasi
            </Badge>
            <div className="flex items-center justify-between mb-6">
                <h2 className="text-2xl font-bold text-green-800">
                    Pengumuman
                </h2>
                <Link href="/pengumuman">
                    <Button variant="link" className="text-green-700">
                        Selengkapnya
                    </Button>
                </Link>
            </div>

            {/* Highlight Announcement */}
            {posts.length > 1 && (
                <div className="grid grid-cols-1 gap-6 mb-8">
                    <Card className="p-4 flex flex-col md:flex-row items-start">
                        <img
                            src={`/storage/${posts[0].ImagePost}`}
                            alt={posts[0].JudulPost}
                            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">
                                {posts[0].kategori?.NamaKategori}
                            </Badge>
                            <p className="text-gray-500 text-sm mt-2">
                                {new Date(
                                    posts[0].created_at
                                ).toLocaleDateString("id-ID", {
                                    day: "numeric",
                                    month: "long",
                                    year: "numeric",
                                })}
                            </p>
                            <h3 className="text-lg font-semibold mt-2 text-gray-900">
                                {posts[0].JudulPost}
                            </h3>
                            <p className="text-sm text-gray-600 mt-2">
                                {posts[0].DescPost.replace(
                                    /<[^>]*>/g,
                                    ""
                                ).slice(0, 160)}
                                ...
                            </p>
                            <Link href={`/pengumuman/${posts[0].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>
            )}

            {/* List of Announcements */}
            {posts.length > 1 && (
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    {posts.slice(1).map((post) => (
                        <Card key={post.PostId} className="p-4">
                            <img
                                src={`/storage/${post.ImagePost}`}
                                alt={post.JudulPost}
                                className="rounded-md"
                            />
                            <CardContent className="p-4">
                                <Badge className="bg-red-600 text-white">
                                    {post.kategori?.NamaKategori}
                                </Badge>
                                <p className="text-gray-500 text-sm mt-2">
                                    {new Date(
                                        post.created_at
                                    ).toLocaleDateString("id-ID", {
                                        day: "numeric",
                                        month: "long",
                                        year: "numeric",
                                    })}
                                </p>
                                <h3 className="text-md font-semibold mt-2 text-gray-900">
                                    {post.JudulPost}
                                </h3>
                                <p className="text-sm text-gray-600 mt-2">
                                    {post.DescPost.replace(
                                        /<[^>]*>/g,
                                        ""
                                    ).slice(0, 160)}
                                    ...
                                </p>
                                <Link href={`/pengumuman/${post.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 AnnouncementSection;