import { getAllPosts } from '@/lib/blog';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Blog — VYNDR',
  description: 'Betting strategy, prop analysis breakdowns, and product updates from VYNDR.',
};

export default function BlogIndex() {
  const posts = getAllPosts();

  return (
    <section className="py-16 px-4">
      <div className="max-w-3xl mx-auto">
        <h1 className="text-4xl font-bold mb-2">Blog</h1>
        <p className="text-[var(--text-muted)] mb-12">Strategy. Analysis. Updates.</p>

        {posts.length === 0 ? (
          <p className="text-[var(--text-muted)]">Posts coming soon.</p>
        ) : (
          <div className="space-y-8">
            {posts.map((post) => (
              <a
                key={post.slug}
                href={`/blog/${post.slug}`}
                className="block p-6 rounded-xl bg-[var(--card)] border border-[var(--border)] hover:border-[var(--cyan)] transition"
              >
                <div className="flex items-center gap-3 text-xs text-[var(--text-muted)] mb-2">
                  <time>{post.date}</time>
                  <span>{post.readingTime} min read</span>
                </div>
                <h2 className="text-xl font-semibold mb-1">{post.title}</h2>
                <p className="text-sm text-[var(--text-muted)]">{post.description}</p>
                {post.tags.length > 0 && (
                  <div className="flex gap-2 mt-3">
                    {post.tags.map((tag) => (
                      <span key={tag} className="px-2 py-0.5 text-xs rounded-full bg-[var(--border)] text-[var(--text-muted)]">
                        {tag}
                      </span>
                    ))}
                  </div>
                )}
              </a>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}
