import type { Metadata } from "next";
import Link from "next/link";
import { getPosts } from "@/lib/posts";

export const metadata: Metadata = { title: "Personal Blog" };

export default function BlogPage() {
  const posts = getPosts("blog");

  return (
    <div style={{ maxWidth: "100%" }}>
      <div className="page-title">Personal Blog</div>
      <p style={{ fontSize: "0.8rem", color: "var(--text-muted)", marginBottom: "2rem" }}>
        Kişisel yazılar, düşünceler, kariyer notları
      </p>

      {posts.length === 0 ? (
        <div className="card" style={{ color: "var(--text-muted)", fontSize: "0.85rem" }}>
          Henüz yazı yok. Yakında...
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
          {posts.map((post) => (
            <article key={post.slug} className="card">
              <Link href={`/blog/${post.slug}`}>
                <h2 style={{ fontSize: "1rem", fontWeight: 700, color: "var(--text)", marginBottom: "0.4rem", lineHeight: 1.4 }}>
                  {post.title}
                </h2>
              </Link>
              <p style={{ fontSize: "0.82rem", color: "var(--text-muted)", marginBottom: "0.75rem", lineHeight: 1.6 }}>
                {post.excerpt}
              </p>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "0.5rem" }}>
                <div style={{ display: "flex", gap: "0.3rem", flexWrap: "wrap" }}>
                  {post.tags.map((t) => <span key={t} className="tag">{t}</span>)}
                </div>
                <span style={{ fontSize: "0.72rem", color: "var(--text-muted)" }}>
                  {new Date(post.date).toLocaleDateString("tr-TR", { year: "numeric", month: "long", day: "numeric" })}
                </span>
              </div>
            </article>
          ))}
        </div>
      )}
    </div>
  );
}