import FunZoneCarousel from "@/components/fun-zone-carousel";
import { funZoneItems } from "@/lib/data";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Fun Zone | Gabriel Kaszewski",
  description: "Games, tools, and toys I built for fun. Try them out!",
  keywords: [
    "games",
    "pixel canvas",
    "wordle",
    "game jam",
    "interactive",
    "playground",
  ],
  alternates: {
    canonical: "https://gabrielkaszewski.dev/fun-zone",
  },
  openGraph: {
    title: "Fun Zone | Gabriel Kaszewski",
    description: "Games, tools, and toys I built for fun. Try them out!",
    url: "https://gabrielkaszewski.dev/fun-zone",
  },
  twitter: {
    card: "summary",
    title: "Fun Zone | Gabriel Kaszewski",
    description: "Games, tools, and toys I built for fun. Try them out!",
  },
};

const FunZonePage = () => {
  return (
    <div className="flex w-full min-h-screen flex-col items-center gap-8 pt-24 px-4 pb-16">
      <div className="text-center">
        <h1 className="text-5xl font-bold text-yellow-400 text-shadow-lg">
          Fun Zone
        </h1>
        <p className="text-white/50 mt-2">stuff I made for fun</p>
      </div>

      <FunZoneCarousel items={funZoneItems} />
    </div>
  );
};

export default FunZonePage;