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

function isNew(dateStr: string): boolean {
  const postDate = new Date(dateStr);
  const now = new Date();
  const diffDays = (now.getTime() - postDate.getTime()) / (1000 * 60 * 60 * 24);
  return diffDays <= 30;
}

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

  return (
    <div className="space-y-6">
      <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>
        <Window title="Blog Posts">
          {allPostsData.length > 0 ? (
            <ul className="space-y-4">
              {allPostsData.map(({ id, date, title, wip }) => (
                <li key={id}>
                  <Link
                    href={`/posts/${id}`}
                    className="relative block overflow-hidden rounded-md bg-white/50 p-4 transition-all duration-200 hover:bg-white/80 hover:shadow-md"
                  >
                    {isNew(date) && !wip && (
                      <div className="animate-blink absolute top-[10px] right-[-24px] w-[100px] rotate-[35deg] bg-[#e05010] py-0.5 text-center text-[9px] font-bold text-white shadow-sm">
                        NEW!
                      </div>
                    )}
                    {wip && (
                      <div className="absolute top-[10px] right-[-24px] w-[100px] rotate-[35deg] bg-amber-500 py-0.5 text-center text-[9px] font-bold text-white shadow-sm">
                        🚧 WIP
                      </div>
                    )}
                    <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>
  );
}