/**
 * PlayerControls — Play/Pause/Stop/Skip control bar
 */

import React from 'react'
import { View, StyleSheet } from 'react-native'

import { ControlButton } from './ControlButton'
import { SPACING } from '@/src/shared/constants/spacing'

interface PlayerControlsProps {
  isRunning: boolean
  isPaused: boolean
  onStart: () => void
  onPause: () => void
  onResume: () => void
  onStop: () => void
  onSkip: () => void
}

export function PlayerControls({
  isRunning,
  isPaused,
  onStart,
  onPause,
  onResume,
  onStop,
  onSkip,
}: PlayerControlsProps) {
  if (!isRunning) {
    return (
      <View style={styles.container}>
        <ControlButton icon="play.fill" onPress={onStart} size={80} />
      </View>
    )
  }

  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <ControlButton
          icon="stop.fill"
          onPress={onStop}
          size={56}
          variant="danger"
        />
        <ControlButton
          icon={isPaused ? 'play.fill' : 'pause.fill'}
          onPress={isPaused ? onResume : onPause}
          size={80}
        />
        <ControlButton
          icon="forward.end.fill"
          onPress={onSkip}
          size={56}
          variant="secondary"
        />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: SPACING[6],
  },
})
