import prisma from "@/lib/prisma";
import Link from "next/link";

export default async function BlogListingPage() {
  const blogs = await prisma.blog.findMany({
    where: { private: false, user: { is: {} } },
    include: {
      user: { select: { id: true, id_aw: true, username: true, profile_photo: true } },
    },
    orderBy: { created_at: "desc" },
    take: 24,
  });

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Blog Posts</h1>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {blogs.map((blog) => (
          <Link
            key={blog.id}
            href={`/blog/show/${blog.id}`}
            className="bg-surface rounded-lg overflow-hidden hover:ring-1 hover:ring-primary transition-all group"
          >
            <div className="p-4">
              <p className="font-semibold text-lg">{blog.title}</p>
              {blog.post && (
                <p className="text-text-muted mt-2 text-sm line-clamp-3">
                  {blog.post.slice(0, 200)}
                </p>
              )}
              <div className="flex items-center justify-between mt-3 text-text-muted text-sm">
                <span>{blog.user?.username}</span>
                <span>{new Date(blog.created_at).toLocaleDateString()}</span>
              </div>
            </div>
          </Link>
        ))}
      </div>

      {blogs.length === 0 && (
        <div className="text-center py-16 text-text-muted">
          <p className="text-lg">No blog posts yet</p>
        </div>
      )}
    </div>
  );
}