import { GameMeta } from "@/types";
import BookSpine from "./BookSpine";

export default function BookShelf({ games }: { games: GameMeta[] }) {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center px-4 py-16">
      {/* Title */}
      <div className="text-center mb-16">
        <h1 className="font-playfair text-4xl md:text-6xl font-bold text-parchment mb-4">
          Cronicas de los Reinos
        </h1>
        <p className="font-lora text-stone-400 text-lg italic max-w-lg mx-auto">
          Las historias epicas de los mundos que nos unieron
        </p>
        <div className="w-32 h-0.5 bg-amber-700/50 mx-auto mt-6" />
      </div>

      {/* Shelf */}
      <div className="relative">
        {/* Books row */}
        <div className="flex gap-6 md:gap-8 items-end justify-center flex-wrap px-8 pb-4">
          {games.map((game) => (
            <BookSpine key={game.slug} game={game} />
          ))}
        </div>

        {/* Shelf surface */}
        <div className="h-4 bg-gradient-to-b from-wood-medium to-wood-dark rounded-sm shadow-[0_4px_12px_rgba(0,0,0,0.5)]" />
        <div className="h-2 bg-wood-dark/50 rounded-b-sm" />
      </div>

      {/* Footer */}
      <p className="mt-16 text-stone-600 text-sm font-lora">
        Selecciona un tomo para comenzar a leer
      </p>
    </div>
  );
}