'use client'

import React from 'react'

interface Props {
  currentStep: number
  isSubmitting: boolean
  isEditMode: boolean
  titleEmpty: boolean
  onBack: () => void
  onNext: () => void
  onSubmit: () => void
}

export function NavigationButtons({ currentStep, isSubmitting, isEditMode, titleEmpty, onBack, onNext, onSubmit }: Props) {
  return (
    <div className="flex items-center justify-between">
      <button
        onClick={onBack}
        className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
      >
        {currentStep === 1 ? 'Abbrechen' : 'Zurueck'}
      </button>

      {currentStep < 8 ? (
        <button
          onClick={onNext}
          disabled={currentStep === 1 && titleEmpty}
          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
        >
          Weiter
        </button>
      ) : (
        <button
          onClick={onSubmit}
          disabled={isSubmitting || titleEmpty}
          className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50 flex items-center gap-2"
        >
          {isSubmitting ? (
            <>
              <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
              </svg>
              Bewerte...
            </>
          ) : (
            isEditMode ? 'Speichern & neu bewerten' : 'Assessment starten'
          )}
        </button>
      )}
    </div>
  )
}