import React from 'react'
import { Clock, Cpu } from 'lucide-react'

interface VideoSettingsProps {
  duration: string
  onDurationChange: (duration: string) => void
  modelType: string
  onModelTypeChange: (modelType: string) => void
}

const VideoSettings: React.FC<VideoSettingsProps> = ({
  duration,
  onDurationChange,
  modelType,
  onModelTypeChange
}) => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      {/* Duration Setting */}
      <div>
        <label className="block text-sm font-medium text-secondary-700 mb-2">
          <Clock size={16} className="inline mr-1" />
          视频时长
        </label>
        <select
          value={duration}
          onChange={(e) => onDurationChange(e.target.value)}
          className="input w-full"
        >
          <option value="5">5秒</option>
          <option value="10">10秒</option>
        </select>
      </div>

      {/* Model Type Setting */}
      <div>
        <label className="block text-sm font-medium text-secondary-700 mb-2">
          <Cpu size={16} className="inline mr-1" />
          模型类型
        </label>
        <select
          value={modelType}
          onChange={(e) => onModelTypeChange(e.target.value)}
          className="input w-full"
        >
          <option value="lite">Lite (快速)</option>
          <option value="pro">Pro (高质量)</option>
        </select>
      </div>
    </div>
  )
}

export default VideoSettings
