import { Disc, Music, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";
import { motion } from "motion/react";
import { Album } from "@/types";

interface AlbumSelectorProps {
    albums: Album[];
    selectedAlbum: Album | null;
    onSelect: (album: Album) => void;
}

export function AlbumSelector({ albums, selectedAlbum, onSelect }: AlbumSelectorProps) {
    if (albums.length === 0) return null;

    return (
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {albums.map((album, i) => (
                <motion.div
                    key={album.path}
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.2, delay: i * 0.03 }}
                    onClick={() => onSelect(album)}
                    className={cn(
                        "group cursor-pointer flex flex-col gap-3 relative",
                        selectedAlbum?.path === album.path ? "opacity-80" : ""
                    )}
                >
                    <div className="aspect-square rounded-lg bg-muted/20 overflow-hidden shadow-lg border border-white/5 group-hover:border-primary/50 group-hover:shadow-primary/10 transition-all duration-300 relative">
                        {album.coverPath ? (
                            <img
                                src={`/api/cover?path=${encodeURIComponent(album.coverPath)}`}
                                alt={album.name}
                                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                            />
                        ) : (
                            <div className="w-full h-full flex items-center justify-center bg-muted/10">
                                <Music className="w-16 h-16 text-muted-foreground/20" />
                            </div>
                        )}
                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
                    </div>

                    <div className="space-y-1">
                        <h3 className="font-semibold text-sm leading-tight truncate group-hover:text-primary transition-colors">
                            {album.name}
                        </h3>
                        <p className="text-xs text-muted-foreground truncate font-mono opacity-60">
                            {album.path.split('/').pop()}
                        </p>
                    </div>
                </motion.div>
            ))}
        </div>
    );
}