import type { Metadata } from "next";
import Link from "next/link";
import { getSortedPostsMeta } from "@/lib/posts";
import { format } from "date-fns";
import { sr } from "date-fns/locale";
import { DocumentTextIcon, PencilSquareIcon } from "@heroicons/react/24/outline";

export const metadata: Metadata = {
  title: "Blog",
  description: "Priče, preporuke i vijesti o našoj kući i okolini.",
};

export default function BlogPage() {
  const posts = getSortedPostsMeta();

  return (
    <div className="max-w-3xl mx-auto px-4 py-12">
      <h1 className="text-4xl font-bold text-sky-800 mb-2 flex items-center gap-3"><DocumentTextIcon className="w-9 h-9" /> Blog</h1>
      <p className="text-gray-500 mb-10">Priče, savjeti i novosti</p>

      {posts.length === 0 ? (
        <div className="bg-white rounded-2xl p-12 text-center border border-gray-100 shadow-sm">
          <div className="mb-4"><PencilSquareIcon className="w-12 h-12 mx-auto text-gray-300" /></div>
          <p className="text-gray-500">Još nema objavljenih postova.</p>
          <p className="text-sm text-gray-400 mt-2">
            Dodajte <code>.md</code> fajlove u <code>content/blog/</code>.
          </p>
        </div>
      ) : (
        <div className="space-y-6">
          {posts.map((post) => (
            <Link
              key={post.slug}
              href={`/blog/${post.slug}`}
              className="group block bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-md hover:border-sky-200 transition-all"
            >
              <div className="flex items-center gap-2 mb-2">
                {post.tags?.map((t) => (
                  <span
                    key={t}
                    className="text-xs bg-sky-50 text-sky-700 px-2 py-0.5 rounded-full"
                  >
                    {t}
                  </span>
                ))}
                <span className="text-xs text-gray-400 ml-auto">
                  {post.date
                    ? format(new Date(post.date), "d. MMMM yyyy.", { locale: sr })
                    : ""}
                </span>
              </div>
              <h2 className="text-xl font-semibold text-gray-800 group-hover:text-sky-700 transition-colors mb-2">
                {post.title}
              </h2>
              <p className="text-gray-500 text-sm line-clamp-2">{post.excerpt}</p>
              <span className="text-sky-600 text-sm mt-3 block">Pročitajte više →</span>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}
