"use client";

import { Button } from "@/components/atoms/button";
import type { StepActionsProps } from "./types";

function LoadingSpinner() {
  return (
    <span className="flex items-center justify-center">
      <svg
        className="animate-spin -ml-1 mr-3 h-4 w-4 text-white"
        xmlns="http://www.w3.org/2000/svg"
        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>
      Processing...
    </span>
  );
}

export function StepActions({
  onNext,
  onPrevious,
  onSkip,
  nextLabel = "Continue",
  previousLabel = "Back",
  skipLabel = "Skip",
  loading = false,
  disabled = false,
  hasErrors = false,
}: StepActionsProps) {
  const isButtonDisabled = disabled || loading;

  return (
    <div className="flex flex-col sm:flex-row gap-3">
      <div className="flex gap-3 flex-1">
        {onPrevious && (
          <Button
            onClick={onPrevious}
            variant="outline"
            className="flex-1 sm:flex-none"
            disabled={isButtonDisabled}
          >
            {previousLabel}
          </Button>
        )}

        {onSkip && (
          <Button
            onClick={onSkip}
            variant="outline"
            className="flex-1 sm:flex-none"
            disabled={isButtonDisabled}
          >
            {skipLabel}
          </Button>
        )}
      </div>

      {onNext && (
        <Button
          onClick={onNext}
          className="flex-1 sm:flex-none sm:min-w-[120px]"
          disabled={isButtonDisabled || hasErrors}
        >
          {loading ? <LoadingSpinner /> : nextLabel}
        </Button>
      )}
    </div>
  );
}
