import { Rocket } from "lucide-react";

interface GenerateActionBarProps {
  isGenerating: boolean;
  progress: number;
  disabled: boolean;
  materialCount?: number;
  onGenerate: () => void;
}

export function GenerateActionBar({
  isGenerating,
  progress,
  disabled,
  materialCount = 1,
  onGenerate,
}: GenerateActionBarProps) {
  return (
    <div>
      <button
        onClick={onGenerate}
        disabled={disabled}
        className={`w-full py-4 rounded-xl font-bold text-lg transition-all ${disabled
          ? "bg-gray-600 cursor-not-allowed text-gray-400"
          : "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white shadow-lg hover:shadow-purple-500/25"
          }`}
      >
        {isGenerating ? (
          <span className="flex items-center justify-center gap-3">
            <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
              <circle
                className="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                strokeWidth="4"
                fill="none"
              />
              <path
                className="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
              />
            </svg>
            生成中... {progress}%
          </span>
        ) : (
          <span className="flex items-center justify-center gap-2">
            <Rocket className="h-5 w-5" />
            生成视频
          </span>
        )}
      </button>
      {!isGenerating && materialCount >= 2 && (
        <p className="text-xs text-gray-400 text-center mt-1.5">
          多素材模式 ({materialCount} 个机位)，生成耗时较长
        </p>
      )}
    </div>
  );
}
