import React from "react";
import { Link } from "@inertiajs/react";
import { Post } from "@/components/DetailArtikel/types";

interface DetailSearchProps {
    searchResults: Post[];
    searchQuery: string;
}

export default function DetailSearch({
    searchResults,
    searchQuery,
}: DetailSearchProps) {
    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 mx-auto px-4 py-8">
            <div className="mb-8">
                <h1 className="text-2xl font-bold mb-2">Hasil Pencarian</h1>
                <p className="text-gray-600">
                    Menampilkan hasil untuk "{searchQuery}" (
                    {searchResults.length} hasil)
                </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {searchResults.map((result) => (
                    <Link
                        key={result.PostId}
                        href={getRouteByCategory(
                            result.kategori?.NamaKategori || "",
                            result.SlugPost
                        )}
                        className="group"
                    >
                        <div className="border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow h-full">
                            <img
                                src={`/storage/${result.ImagePost}`}
                                alt={result.JudulPost}
                                className="w-full h-48 object-cover"
                            />
                            <div className="p-4">
                                <div className="flex items-center gap-2 mb-2">
                                    <span className="bg-red-500 text-white px-2 py-1 text-xs rounded">
                                        {result.kategori?.NamaKategori}
                                    </span>
                                    <span className="text-sm text-gray-500">
                                        {new Date(
                                            result.created_at
                                        ).toLocaleDateString("id-ID", {
                                            day: "numeric",
                                            month: "long",
                                            year: "numeric",
                                        })}
                                    </span>
                                </div>
                                <h2 className="font-semibold mb-2 group-hover:text-red-600 transition-colors">
                                    {result.JudulPost}
                                </h2>
                                <p className="text-sm text-gray-600 line-clamp-2">
                                    {result.DescPost.replace(/<[^>]*>/g, "")}
                                </p>
                            </div>
                        </div>
                    </Link>
                ))}
            </div>

            {searchResults.length === 0 && (
                <div className="text-center py-12">
                    <p className="text-gray-500">
                        Tidak ada hasil yang ditemukan
                    </p>
                </div>
            )}
        </div>
    );
}