import React from 'react'
import { Button } from '@/components/ui/button'
import { ChevronLeft, ChevronRight, Save } from 'lucide-react'

interface StepperNavigationProps {
  currentStep: number
  totalSteps: number
  isSubmitting: boolean
  isEditMode: boolean
  onPrevious: () => void
  onNext: () => void
  onSubmit: () => void
}

const StepperNavigation: React.FC<StepperNavigationProps> = ({
  currentStep,
  totalSteps,
  isSubmitting,
  isEditMode,
  onPrevious,
  onNext,
  onSubmit,
}) => {
  return (
    <div className="bg-gray-800 px-8 py-6 border-t border-gray-700">
      <div className="flex justify-between items-center">
        <Button
          variant="outline"
          disabled={currentStep === 0}
          onClick={onPrevious}
          className="flex items-center gap-2 border-gray-700 text-gray-300 hover:bg-gray-700 hover:text-white disabled:opacity-50"
        >
          <ChevronLeft className="w-4 h-4" />
          Previous
        </Button>

        <div className="flex items-center gap-2 text-sm text-gray-400">
          <span>Step {currentStep + 1} of {totalSteps}</span>
        </div>

        {currentStep < totalSteps - 2 ? (
          <Button
            onClick={onNext}
            className="flex items-center gap-2 bg-[#9B2335] hover:bg-[#9B2335]/90 shadow-lg"
          >
            Next
            <ChevronRight className="w-4 h-4" />
          </Button>
        ) : currentStep === totalSteps - 2 ? (
          <Button
            onClick={onNext}
            className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 shadow-lg"
          >
            Review
            <ChevronRight className="w-4 h-4" />
          </Button>
        ) : (
          <Button
            onClick={onSubmit}
            disabled={isSubmitting}
            className="flex items-center gap-2 bg-green-600 hover:bg-green-700 shadow-lg"
          >
            {isSubmitting ? (
              <>
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                Saving...
              </>
            ) : (
              <>
                <Save className="w-4 h-4" />
                {isEditMode ? "Update Record" : "Submit Form"}
              </>
            )}
          </Button>
        )}
      </div>
    </div>
  )
}

export default StepperNavigation