import { allPosts } from "content-collections";
import Image from "next/image";

export default function Posts() {
  return (
    <>
      <div className="bg-gray-100 min-h-screen">
        <header className="bg-white shadow">
          <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
            <h1 className="text-3xl font-bold text-gray-900">Blog</h1>
          </div>
        </header>

        <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8 grid grid-cols-1 4xl:grid-cols-3">
          {allPosts.map((post) => (
            <div key={post._meta.path}>
              <a href={`/blog/${post._meta.path}`}>
                <h3 className="text-xl font-bold">{post.title}</h3>
                {" -- "}
                <p>{post.summary}</p>
                {post.image && (
                  <Image
                    alt={post.imageDesc!}
                    src={post.imageURL!}
                    width={1280}
                    height={720}
                    className="max-w-md"
                  />
                )}
              </a>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}