import type { Metadata } from "next";
import Link from "next/link";
import { getStories } from "@/data/creativeData";
import ExpandableStory from "@/components/ExpandableStory";

export const metadata: Metadata = {
  title: "Mini Stories",
  description: "A collection of brief narratives and creative stories. Explore fictional tales that capture moments and emotions in concise storytelling.",
  openGraph: {
    title: "Mini Stories | Mainasara Tsowa",
    description: "A collection of brief narratives and creative stories capturing moments and emotions.",
    url: "https://mainasara.dev/stories",
  },
  twitter: {
    title: "Mini Stories | Mainasara Tsowa",
    description: "A collection of brief narratives and creative stories capturing moments and emotions.",
  },
};

export default async function StoriesPage() {
  const stories = await getStories();

  return (
    <div className="min-h-screen bg-[#FAF8F5] font-mono">
      <div className="max-w-4xl mx-auto px-6 py-12">
        <header className="text-center mb-16">
          <div className="mb-8">
            <div className="w-32 h-32 mx-auto bg-[#3D3D3D] rounded-full flex items-center justify-center border-[3px] border-[#F0E8D8]">
              <div className="text-4xl font-bold text-[#F0E8D8]">📝</div>
            </div>
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-[#3D3D3D] mb-4 uppercase tracking-wide">
            Mini Stories
          </h1>
          <p className="text-lg text-[#5D5D5D] max-w-2xl mx-auto leading-relaxed font-semibold">
            Capturing moments in brief narratives
          </p>
        </header>

        <nav className="mb-16">
          <div className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-6 shadow-brutal">
            <ul className="flex flex-wrap justify-center gap-4 md:gap-8">
              <li>
                <Link
                  href="/"
                  className="text-[#3D3D3D] font-bold hover:bg-[#CBD6C8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                >
                  Home
                </Link>
              </li>
              <li>
                <Link
                  href="/digital-art"
                  className="text-[#3D3D3D] font-bold hover:bg-[#E0C9CC] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                >
                  Digital Art
                </Link>
              </li>
              <li>
                <Link
                  href="/stories"
                  className="border-[#3D3D3D] bg-[#F0E8D8] px-4 py-2 border-2 text-[#3D3D3D] rounded-sm"
                >
                  Stories
                </Link>
              </li>
              <li>
                <Link
                  href="/thoughts"
                  className="text-[#3D3D3D] font-bold hover:bg-[#B8C5CE] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                >
                  Thoughts
                </Link>
              </li>
            </ul>
          </div>
        </nav>

        <main className="space-y-8">
          {stories.map((story) => (
            <ExpandableStory key={story.id} story={story} />
          ))}
        </main>

        <footer className="mt-20 text-center">
          <div className="bg-[#3D3D3D] text-white p-4 font-bold rounded-md">
            <p className="text-sm uppercase">Built with neo-brutalist muted colors</p>
          </div>
        </footer>
      </div>
    </div>
  );
}
