"use client"

import { FC } from "react"
import { Button } from "@/components/ui/button"

interface StepNavigationProps {
  currentStep: number
  totalSteps: number
  completedSteps: number[]
  onBack: () => void
  onNext: () => void
}

const StepNavigation: FC<StepNavigationProps> = ({ currentStep, totalSteps, onBack, onNext }) => (
  <div className="flex justify-between mt-8">
    {currentStep > 1 ? (
      <Button variant="outline" onClick={onBack} className="text-muted-foreground">
        Back
      </Button>
    ) : (
      <div></div>
    )}

    <Button className="bg-primary hover:bg-primary/90 text-primary-foreground" onClick={onNext}>
      {currentStep === totalSteps ? "Complete" : "Next step"}
    </Button>
  </div>
)

export default StepNavigation
