'use client';

import { motion } from 'framer-motion';
import AlbumCard from './AlbumCard';
import { Album } from '@/lib/types';
import { useAlbums } from '@/lib/AlbumsContext';

interface AlbumShowcaseProps {
  purchasedAlbums: string[];
  onPlay: (album: Album) => void;
  onPurchase: (album: Album) => void;
}

export default function AlbumShowcase({ purchasedAlbums, onPlay, onPurchase }: AlbumShowcaseProps) {
  const { albums } = useAlbums();
  return (
    <section className="py-20 px-4 md:px-8" id="albums">
      <div className="max-w-7xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold text-paper-dark mb-4 tracking-tight border-b-4 border-paper-dark inline-block pb-2">
            Discography
          </h2>
          <p className="text-xl text-paper-brown max-w-2xl mx-auto mt-6">
            Explore a collection of progressive rock albums that push the boundaries of sound and creativity
          </p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {albums.map((album) => (
            <AlbumCard
              key={album.id}
              album={album}
              isPurchased={purchasedAlbums.includes(album.id)}
              onPlay={onPlay}
              onPurchase={onPurchase}
            />
          ))}
        </div>
      </div>
    </section>
  );
}