import React from 'react'
import { Video, FolderOpen } from 'lucide-react'

interface VideoModeSelectorProps {
  mode: 'single' | 'batch'
  onModeChange: (mode: 'single' | 'batch') => void
}

const VideoModeSelector: React.FC<VideoModeSelectorProps> = ({ mode, onModeChange }) => {
  return (
    <div className="flex space-x-1 bg-secondary-100 p-1 rounded-lg">
      <button
        onClick={() => onModeChange('single')}
        className={`flex items-center px-4 py-2 rounded-md text-sm font-medium transition-colors ${
          mode === 'single'
            ? 'bg-white text-primary-600 shadow-sm'
            : 'text-secondary-600 hover:text-secondary-900'
        }`}
      >
        <Video size={16} className="mr-2" />
        单个生成
      </button>
      <button
        onClick={() => onModeChange('batch')}
        className={`flex items-center px-4 py-2 rounded-md text-sm font-medium transition-colors ${
          mode === 'batch'
            ? 'bg-white text-primary-600 shadow-sm'
            : 'text-secondary-600 hover:text-secondary-900'
        }`}
      >
        <FolderOpen size={16} className="mr-2" />
        批量生成
      </button>
    </div>
  )
}

export default VideoModeSelector
