import React from 'react';
import { Icons } from '@/components/ui/Icon';
import { DesktopVolumeControl } from './DesktopVolumeControl';

interface DesktopLeftControlsProps {
    isPlaying: boolean;
    currentTime: number;
    duration: number;
    volume: number;
    isMuted: boolean;
    showVolumeBar: boolean;
    volumeBarRef: React.RefObject<HTMLDivElement | null>;
    onTogglePlay: () => void;
    onSkipForward: () => void;
    onSkipBackward: () => void;
    onToggleMute: () => void;
    onVolumeChange: (e: React.MouseEvent<HTMLDivElement>) => void;
    onVolumeMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
    formatTime: (seconds: number) => string;
}

export function DesktopLeftControls({
    isPlaying,
    currentTime,
    duration,
    volume,
    isMuted,
    showVolumeBar,
    volumeBarRef,
    onTogglePlay,
    onSkipForward,
    onSkipBackward,
    onToggleMute,
    onVolumeChange,
    onVolumeMouseDown,
    formatTime
}: DesktopLeftControlsProps) {
    return (
        <div className="flex items-center gap-3">
            {/* Play/Pause */}
            <button
                onClick={onTogglePlay}
                className="btn-icon"
                aria-label={isPlaying ? 'Pause' : 'Play'}
            >
                {isPlaying ? <Icons.Pause size={20} /> : <Icons.Play size={20} />}
            </button>

            {/* Skip Backward 10s */}
            <button
                onClick={onSkipBackward}
                className="btn-icon"
                aria-label="Skip backward 10 seconds"
                title="后退 10 秒"
            >
                <Icons.SkipBack size={20} />
            </button>

            {/* Skip Forward 10s */}
            <button
                onClick={onSkipForward}
                className="btn-icon"
                aria-label="Skip forward 10 seconds"
                title="快进 10 秒"
            >
                <Icons.SkipForward size={20} />
            </button>

            {/* Volume */}
            <DesktopVolumeControl
                volumeBarRef={volumeBarRef}
                volume={volume}
                isMuted={isMuted}
                showVolumeBar={showVolumeBar}
                onToggleMute={onToggleMute}
                onVolumeChange={onVolumeChange}
                onVolumeMouseDown={onVolumeMouseDown}
            />

            {/* Time */}
            <span className="text-white text-sm font-medium tabular-nums">
                {formatTime(currentTime)} / {formatTime(duration)}
            </span>
        </div>
    );
}