clienthub/src/components/public/quote/QuoteMultistep.tsx

"use client";

import { useState } from "react";
import type { PublicQuoteView } from "@/lib/quote-service";
import { QuoteStep1Overview } from "./QuoteStep1Overview";
import { QuoteStep2Selection } from "./QuoteStep2Selection";
import { QuoteStep3Summary } from "./QuoteStep3Summary";

interface QuoteMultistepProps {
  quote: PublicQuoteView;
}

export function QuoteMultistep({ quote }: QuoteMultistepProps) {
  const [currentStep, setCurrentStep] = useState(1);

  const handleNextStep = () => {
    if (currentStep < 3) {
      setCurrentStep(currentStep + 1);
    }
  };

  const handlePrevStep = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1);
    }
  };

  // Step progress indicator
  const stepIndicator = (
    <div className="flex items-center justify-center gap-2 mb-6">
      {[1, 2, 3].map((step) => (
        <div key={step} className="flex items-center">
          <div
            className={`w-8 h-8 rounded-full flex items-center justify-center font-semibold text-sm ${
              step <= currentStep
                ? "bg-blue-600 text-white"
                : "bg-slate-200 text-slate-600"
            }`}
          >
            {step}
          </div>
          {step < 3 && (
            <div
              className={`w-8 h-0.5 ${
                step < currentStep ? "bg-blue-600" : "bg-slate-200"
              }`}
            />
          )}
        </div>
      ))}
    </div>
  );

  return (
    <div>
      {stepIndicator}

      {currentStep === 1 && (
        <QuoteStep1Overview
          quote={quote}
          onNext={handleNextStep}
        />
      )}

      {currentStep === 2 && (
        <QuoteStep2Selection
          quote={quote}
          onNext={handleNextStep}
          onPrev={handlePrevStep}
        />
      )}

      {currentStep === 3 && (
        <QuoteStep3Summary
          quote={quote}
          onPrev={handlePrevStep}
        />
      )}
    </div>
  );
}