<template>
  <div class="control-buttons">
    <el-button 
      :type="streamRunning ? 'danger' : 'primary'" 
      size="default"
      @click="$emit('toggleStream')"
      :disabled="streamAddressEmpty || (algorithmRunning && !streamRunning) || hasOfflineVideo"
    >
      {{ streamRunning ? '关闭视频流' : '启动视频流' }}
    </el-button>
    <el-button 
      :type="algorithmRunning ? 'danger' : 'success'" 
      size="default"
      @click="$emit('toggleAlgorithm')"
      :disabled="!isLiveMode && offlineVideoMissing"
    >
      {{ algorithmRunning ? '关闭算法' : '启动算法' }}
    </el-button>
  </div>
</template>

<script setup>
defineProps({
  streamRunning: Boolean,
  algorithmRunning: Boolean,
  streamAddressEmpty: Boolean,
  offlineVideoMissing: Boolean,
  isLiveMode: Boolean,
  hasOfflineVideo: Boolean
})

defineEmits(['toggleStream', 'toggleAlgorithm'])
</script>

<style lang="scss" scoped>
.control-buttons {
  display: flex;
  gap: 12px;
  background: $bg-white;
  padding: 16px;
  border-radius: $radius-md;
  box-shadow: $shadow-sm;

  .el-button {
    flex: 1;
  }
}
</style>
