import type { Metadata } from "next";
import { RecentlyPlayedList } from "@/components/game/RecentlyPlayedList";
import { SectionHeading } from "@/components/ui/Section";
import { listGames } from "@/lib/games";
import { MAX_RECENTLY_PLAYED } from "@/lib/site";

export const metadata: Metadata = {
  title: "Recently Played",
  description: "Games you have played recently on this device.",
};

/** Recently played: server supplies the catalog, client joins history. */
export default async function RecentlyPlayedPage() {
  const { games } = await listGames({ pageSize: 48 });

  return (
    <div className="shell py-10">
      <SectionHeading
        eyebrow="Your history"
        title="Recently Played"
        description={`Your last ${MAX_RECENTLY_PLAYED} games on this device, with a Clear History option. No account needed.`}
      />
      <RecentlyPlayedList games={games} />
    </div>
  );
}