import { Play, Pause, SkipBack, SkipForward, Shuffle, Repeat } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';

export interface PlayerControlsProps {
    isPlaying: boolean;
    onPlayPause: () => void;
    onNext: () => void;
    onPrevious: () => void;
    onShuffle: () => void;
    onRepeat: () => void;
    shuffle: boolean;
    repeat: 'off' | 'track' | 'playlist';
    isExpanded?: boolean;
}

export function PlayerControls({
    isPlaying,
    onPlayPause,
    onNext,
    onPrevious,
    onShuffle,
    onRepeat,
    shuffle,
    repeat,
    isExpanded = false
}: PlayerControlsProps) {
    return (
        <div className={cn("flex items-center gap-4 md:gap-6", isExpanded && "gap-8")}>
            <button
                onClick={onShuffle}
                className={cn(
                    "p-2 rounded-full transition-all duration-300",
                    shuffle
                        ? "text-primary bg-primary/10 shadow-[0_0_10px_rgba(var(--cyan-500),0.3)]"
                        : "text-muted-foreground hover:text-white hover:bg-white/5"
                )}
                title="Shuffle"
            >
                <Shuffle className={cn("w-4 h-4", isExpanded && "w-5 h-5")} />
            </button>

            <button
                onClick={onPrevious}
                className="text-white hover:text-primary transition-colors p-2 active:scale-95 hover:bg-white/5 rounded-full"
            >
                <SkipBack className={cn("w-5 h-5 fill-current", isExpanded && "w-6 h-6")} />
            </button>

            <button
                onClick={onPlayPause}
                className={cn(
                    "rounded-full bg-primary text-black flex items-center justify-center hover:scale-105 active:scale-95 transition-all shadow-[0_0_20px_rgba(var(--cyan-500),0.5)] hover:shadow-[0_0_30px_rgba(var(--cyan-500),0.8)]",
                    isExpanded ? "w-16 h-16" : "w-12 h-12"
                )}
            >
                {isPlaying ? (
                    <Pause className={cn("fill-current", isExpanded ? "w-8 h-8" : "w-6 h-6")} />
                ) : (
                    <Play className={cn("fill-current ml-1", isExpanded ? "w-8 h-8" : "w-6 h-6")} />
                )}
            </button>

            <button
                onClick={onNext}
                className="text-white hover:text-primary transition-colors p-2 active:scale-95 hover:bg-white/5 rounded-full"
            >
                <SkipForward className={cn("w-5 h-5 fill-current", isExpanded && "w-6 h-6")} />
            </button>

            <button
                onClick={onRepeat}
                className={cn(
                    "p-2 rounded-full transition-all duration-300 relative",
                    repeat !== 'off'
                        ? "text-primary bg-primary/10 shadow-[0_0_10px_rgba(var(--cyan-500),0.3)]"
                        : "text-muted-foreground hover:text-white hover:bg-white/5"
                )}
                title="Repeat"
            >
                <Repeat className={cn("w-4 h-4", isExpanded && "w-5 h-5")} />
                {repeat === 'track' && (
                    <span className="absolute -top-1 -right-1 text-[8px] font-bold bg-primary text-black px-1 rounded-full">1</span>
                )}
            </button>
        </div>
    );
}