/**
 * Step Navigation Component
 * Professional Resume Builder - Enhanced with resume-example.com design patterns
 *
 * @author David Valera Melendez <david@valera-melendez.de>
 * @created 2025-08-07
 * @location Made in Germany 🇩🇪
 */

'use client';

import React from 'react';
import { ModernButton } from '@/components/ui/ModernButton';

interface StepNavigationProps {
  onPrevious?: () => void;
  onNext?: () => void;
  onSave?: () => void;
  isFirstStep?: boolean;
  isLastStep?: boolean;
  canProceed?: boolean;
  isLoading?: boolean;
  className?: string;
}

export const StepNavigation: React.FC<StepNavigationProps> = ({
  onPrevious,
  onNext,
  onSave,
  isFirstStep = false,
  isLastStep = false,
  canProceed = true,
  isLoading = false,
  className = '',
}) => {
  return (
    <div
      className={`border-border-primary flex items-center justify-between border-t pt-6 ${className}`}
    >
      <div>
        {!isFirstStep && onPrevious && (
          <ModernButton
            variant="outline"
            size="lg"
            onClick={onPrevious}
            disabled={isLoading}
            className="min-w-32"
          >
            <svg
              className="mr-2 h-4 w-4"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M15 19l-7-7 7-7"
              />
            </svg>
            Previous
          </ModernButton>
        )}
      </div>

      <div className="flex items-center gap-3">
        {onSave && (
          <ModernButton
            variant="secondary"
            size="lg"
            onClick={onSave}
            disabled={isLoading}
            className="min-w-24"
          >
            <svg
              className="mr-2 h-4 w-4"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3-3m0 0l-3 3m3-3v12"
              />
            </svg>
            Save
          </ModernButton>
        )}

        {isLastStep
          ? onNext && (
              <ModernButton
                variant="primary"
                size="lg"
                onClick={onNext}
                disabled={!canProceed || isLoading}
                loading={isLoading}
                className="min-w-32"
              >
                <svg
                  className="mr-2 h-4 w-4"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M5 13l4 4L19 7"
                  />
                </svg>
                Complete
              </ModernButton>
            )
          : onNext && (
              <ModernButton
                variant="primary"
                size="lg"
                onClick={onNext}
                disabled={!canProceed || isLoading}
                loading={isLoading}
                className="min-w-32"
              >
                Continue
                <svg
                  className="ml-2 h-4 w-4"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </ModernButton>
            )}
      </div>
    </div>
  );
};