"use client"

import { cn } from "@/lib/utils"
import { ArrowLeft, ArrowRight, Loader2 } from "lucide-react"

export function FooterBar({
  onBack,
  onNext,
  nextLabel = "Neste",
  nextDisabled,
  backDisabled,
  backLabel = "Tilbake",
  submitting,
  isSubmitStep,
}: {
  onBack: () => void
  onNext: () => void
  nextLabel?: string
  nextDisabled?: boolean
  backDisabled?: boolean
  backLabel?: string
  submitting?: boolean
  isSubmitStep?: boolean
}) {
  return (
    <div className="sticky bottom-0 z-10 border-t border-[var(--nr-border)] bg-[var(--nr-surface)]/90 backdrop-blur">
      <div className="mx-auto flex max-w-2xl items-center justify-between gap-3 px-4 py-3">
        <button
          type="button"
          onClick={onBack}
          disabled={backDisabled}
          className="inline-flex min-h-11 items-center gap-2 rounded-lg border border-[var(--nr-border)] bg-[var(--nr-surface)] px-4 text-sm font-medium text-[var(--nr-ink)] transition-colors hover:bg-[var(--nr-surface-2)] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--nr-accent-ring)]/40 disabled:cursor-not-allowed disabled:opacity-40"
        >
          <ArrowLeft className="h-4 w-4" aria-hidden="true" />
          {backLabel}
        </button>
        <button
          type="button"
          onClick={onNext}
          disabled={nextDisabled || submitting}
          className={cn(
            "inline-flex min-h-11 items-center gap-2 rounded-lg px-5 text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--nr-accent-ring)]/50",
            "bg-[var(--nr-accent)] text-[var(--nr-accent-ink)] hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-40",
          )}
        >
          {submitting ? <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" /> : null}
          {nextLabel}
          {!submitting && !isSubmitStep ? <ArrowRight className="h-4 w-4" aria-hidden="true" /> : null}
        </button>
      </div>
    </div>
  )
}