import { getSortedPostsData, PostMeta } from "../lib/posts";
import Link from "next/link";
import Window from "../components/window";

export default function Home() {
  const allPostsData: PostMeta[] = getSortedPostsData();

  return (
    <div className="space-y-12">
      <header className="text-center">
        <h1 className="text-5xl font-bold text-white [text-shadow:_2px_2px_4px_rgb(0_0_0_/_40%)]">
          Gabriel's Kaszewski Blog
        </h1>
        <p className="mt-2 text-lg text-white/90 [text-shadow:_1px_1px_2px_rgb(0_0_0_/_30%)]">
          A little corner of the internet from the 2000s.
        </p>
      </header>

      <section>
        {/* The list of posts is displayed inside our custom Window component */}
        <Window title="Blog Posts">
          {allPostsData.length > 0 ? (
            <ul className="space-y-4">
              {allPostsData.map(({ id, date, title }) => (
                <li key={id}>
                  <Link
                    href={`/posts/${id}`}
                    className="block rounded-md bg-white/50 p-4 transition-all duration-200 hover:bg-white/80 hover:shadow-md"
                  >
                    <h3 className="font-bold text-lg text-blue-800">{title}</h3>
                    <small className="text-gray-600">
                      {new Date(date).toLocaleDateString("en-US", {
                        year: "numeric",
                        month: "long",
                        day: "numeric",
                      })}
                    </small>
                  </Link>
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-gray-600">
              No posts found. Add some markdown files to the 'posts' directory!
            </p>
          )}
        </Window>
      </section>
    </div>
  );
}