import React from "react";
import { Link } from "@inertiajs/react";

import { DetailArtikelProps } from "./types";

export default function DetailArtikel({
    article,
    relatedArticles,
}: DetailArtikelProps) {
    const getRouteByCategory = (kategori: string, slug: string) => {
        const routes: { [key: string]: string } = {
            Pengumuman: `/pengumuman/${slug}`,
            Peraturan: `/peraturan/${slug}`,
            Undangan: `/undangan/${slug}`,
        };

        return routes[kategori] || `/sekilasinfo/${slug}`;
    };

    return (
        <div className="container flex flex-col md:flex-row gap-8 p-4 max-w-6xl mx-auto">
            <div className="w-full md:w-7/12">
                <div className="mb-4 flex flex-row gap-5 items-center">
                    <span className="bg-red-500 text-white px-2 py-1 text-sm rounded">
                        {article.kategori?.NamaKategori}
                    </span>
                    <div className="text-gray-500 text-sm ">
                        {new Date(article.created_at).toLocaleDateString(
                            "id-ID",
                            {
                                day: "numeric",
                                month: "long",
                                year: "numeric",
                            }
                        )}
                    </div>
                </div>
                <h1 className="text-2xl font-bold mb-6">{article.JudulPost}</h1>
                <img
                    src={`/storage/${article.ImagePost}`}
                    alt={article.JudulPost}
                    className="w-full h-auto rounded-lg mb-6"
                />
                <div
                    className="text-justify prose prose-lg max-w-none"
                    dangerouslySetInnerHTML={{ __html: article.DescPost }}
                />
            </div>
            <div className="w-full md:w-5/12">
                <h1 className="text-xl font-bold mb-6">Informasi Lainnya</h1>
                <div className="flex flex-col gap-6">
                    {relatedArticles.slice(0, 5).map((related) => (
                        <Link
                            key={related.PostId}
                            href={getRouteByCategory(
                                related.kategori?.NamaKategori || "",
                                related.SlugPost
                            )}
                            className="group"
                        >
                            <div className="flex flex-row gap-4">
                                <img
                                    src={`/storage/${related.ImagePost}`}
                                    alt={related.JudulPost}
                                    className="w-24 h-24 object-cover rounded-lg"
                                />
                                <div className="flex flex-col">
                                    <span className="bg-red-500 text-white px-2 py-1 text-sm rounded w-fit">
                                        {related.kategori?.NamaKategori}
                                    </span>
                                    <p className="font-medium group-hover:text-red-600 transition-colors mt-2">
                                        {related.JudulPost}
                                    </p>
                                </div>
                            </div>
                        </Link>
                    ))}
                </div>
            </div>
        </div>
    );
}