import { allPosts } from "content-collections";
import Image from "next/image";
import { IconRss } from "@tabler/icons-react";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Techaro Blog",
  description: "What have we been up to?",
};

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 sm:px-6 lg:px-8 mx-auto mt-4">
          <h2 className="text-3xl font-medium">All posts</h2>
          <a href="/blog.rss">
            <IconRss size={16} className="inline-block" /> Follow on RSS!
          </a>
        </div>

        <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>
    </>
  );
}