veza/apps/web/src/features/player/components/PlayerControls.tsx

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

export interface PlayerControlsProps {
    isPlaying: boolean;
    onPlayPause: () => void;
    onNext: () => void;
    onPrevious: () => void;
    onShuffle: () => void;
    onRepeat: () => void;
    shuffle: boolean;
    repeat: 'off' | 'track' | 'playlist';
    isExpanded?: boolean;
    /** Compact sizing for the bar (smaller buttons so everything fits in one row) */
    compact?: boolean;
}

const iconBtnClass = "flex items-center justify-center rounded-full flex-shrink-0 transition-all duration-[var(--sumi-duration-normal)] active:scale-95";

export function PlayerControls({
    isPlaying,
    onPlayPause,
    onNext,
    onPrevious,
    onShuffle,
    onRepeat,
    shuffle,
    repeat,
    isExpanded = false,
    compact = false
}: PlayerControlsProps) {
    const size = compact ? "w-8 h-8" : "w-10 h-10";
    const playSize = isExpanded ? "w-16 h-16" : compact ? "w-10 h-10" : "w-12 h-12";
    const iconSize = isExpanded ? "w-6 h-6" : compact ? "w-4 h-4" : "w-5 h-5";
    const playIconSize = isExpanded ? "w-8 h-8" : compact ? "w-5 h-5" : "w-6 h-6";
    const gapClass = compact ? "gap-1.5" : isExpanded ? "gap-6" : "gap-2 sm:gap-3 md:gap-4";

    return (
        <div className={cn("flex items-center justify-center", gapClass)}>
            <Tooltip content="Shuffle">
                <button
                    onClick={onShuffle}
                    className={cn(
                        iconBtnClass,
                        size,
                        shuffle
                            ? "text-primary bg-primary/10 shadow-queue-item-current"
                            : "text-muted-foreground hover:text-foreground hover:bg-white/5"
                    )}
                >
                    <Shuffle className={cn("w-4 h-4", isExpanded && "w-5 h-5")} />
                </button>
            </Tooltip>

            <button
                onClick={onPrevious}
                className={cn(iconBtnClass, size, "text-foreground hover:text-primary hover:bg-white/5")}
            >
                <SkipBack className={cn(iconSize, "fill-current")} />
            </button>

            <button
                onClick={onPlayPause}
                className={cn(
                    "flex items-center justify-center rounded-full bg-primary text-black flex-shrink-0 active:scale-95 transition-all shadow-sm",
                    playSize
                )}
            >
                {isPlaying ? (
                    <Pause className={cn(playIconSize, "fill-current")} />
                ) : (
                    <Play className={cn(playIconSize, "fill-current ml-0.5")} />
                )}
            </button>

            <button
                onClick={onNext}
                className={cn(iconBtnClass, size, "text-foreground hover:text-primary hover:bg-white/5")}
            >
                <SkipForward className={cn(iconSize, "fill-current")} />
            </button>

            <Tooltip content="Repeat">
                <button
                    onClick={onRepeat}
                    className={cn(
                        iconBtnClass,
                        size,
                        "relative",
                        repeat !== 'off'
                            ? "text-primary bg-primary/10 shadow-queue-item-current"
                            : "text-muted-foreground hover:text-foreground hover:bg-white/5"
                    )}
                >
                    <Repeat className={cn("w-4 h-4", isExpanded && "w-5 h-5")} />
                    {repeat === 'track' && (
                        <span className="absolute -top-0.5 -right-0.5 text-[8px] font-bold bg-primary text-black px-1 rounded-full">1</span>
                    )}
                </button>
            </Tooltip>
        </div>
    );
}