import React from 'react'
import {
  SkipBack,
  Play,
  Pause,
  SkipForward,
  VolumeX,
  Volume1,
  Volume2,
} from 'lucide-react'

interface PlaybackControlsProps {
  isPlaying: boolean
  setIsPlaying: (playing: boolean) => void
  volume: number
  setVolume: (vol: number) => void
  changeChannel: (direction: 'next' | 'prev') => void
}

const PlaybackControls: React.FC<PlaybackControlsProps> = ({
  isPlaying,
  setIsPlaying,
  volume,
  setVolume,
  changeChannel,
}) => (
  <div className="flex w-full items-center justify-between gap-2">
    {/* Left Side - Playback Controls */}
    <div className="flex shrink-0 items-center space-x-1">
      <button
        onClick={() => changeChannel('prev')}
        className="rounded-[var(--lofi-button-radius)] pl-0 pr-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:px-2"
      >
        <SkipBack size={14} className="sm:h-4 sm:w-4" />
      </button>
      <button
        onClick={() => setIsPlaying(!isPlaying)}
        className="rounded-[var(--lofi-button-radius)] px-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:p-2"
      >
        {isPlaying ? (
          <Pause size={14} className="sm:h-4 sm:w-4" />
        ) : (
          <Play size={14} className="sm:h-4 sm:w-4" />
        )}
      </button>
      <button
        onClick={() => changeChannel('next')}
        className="rounded-[var(--lofi-button-radius)] px-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:p-2"
      >
        <SkipForward size={14} className="sm:h-4 sm:w-4" />
      </button>
    </div>

    {/* Right Side - Volume Control */}
    <div className="flex min-w-[90px] items-center space-x-1 sm:min-w-[110px] sm:space-x-2">
      <button
        onClick={() => setVolume(volume === 0 ? 0.5 : 0)}
        className="hidden sm:block rounded-[var(--lofi-button-radius)] px-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:p-2"
      >
        {volume === 0 ? (
          <VolumeX size={14} className="sm:h-4 sm:w-4" />
        ) : volume < 0.5 ? (
          <Volume1 size={14} className="sm:h-4 sm:w-4" />
        ) : (
          <Volume2 size={14} className="sm:h-4 sm:w-4" />
        )}
      </button>
      <input
        type="range"
        min={0}
        max={1}
        step={0.01}
        value={volume}
        onChange={(e) => setVolume(parseFloat(e.target.value))}
        className="h-1 w-full cursor-pointer accent-[var(--lofi-accent)] rounded-lg bg-[var(--lofi-card-hover)]"
      />
    </div>
  </div>
)

export default PlaybackControls
