"use client";
import React, { useState } from "react";

type Step = {
  title: string;
  content: React.ReactNode;
};

type StepWizardProps = {
  steps: Step[];
};

export default function StepWizard({ steps }: StepWizardProps) {
  const [currentStep, setCurrentStep] = useState(0);
  const isLastStep = currentStep === steps.length - 1;
  const isFirstStep = currentStep === 0;

  const handleNext = () => {
    if (!isLastStep) setCurrentStep((prev) => prev + 1);
  };

  const handlePrev = () => {
    if (!isFirstStep) setCurrentStep((prev) => prev - 1);
  };

  const progressPercentage = ((currentStep + 1) / steps.length) * 100;

  return (
    <div className="flex w-full flex-col">
      {/* Step Tabs */}
      <div className="flex items-start justify-between align-top">
        {steps.map((step, index) => (
          <div key={index} className="flex-1 items-start text-center align-top">
            <div
              className={`mx-auto flex h-8 w-8 items-center justify-center rounded-full border-2 border-gray-950/25 text-sm font-medium ${index === currentStep ? "bg-amber-600 text-white" : "bg-gray-200 text-gray-950"} `}
            >
              {index + 1}
            </div>
            <p
              className={`font-bogart text-base/5 my-2 font-medium ${index === currentStep ? " text-gray-950" : "text-gray-500"}`}
            >
              {step.title}
            </p>
          </div>
        ))}
      </div>

      {/* Progress Indicator */}
      <div className="h-2 w-full rounded-full bg-gray-200">
        <div
          className="h-full rounded-full bg-amber-600 transition-all duration-300"
          style={{ width: `${progressPercentage}%` }}
        />
      </div>

      {/* Dynamic Content */}
      <div className="flex flex-col py-10">{steps[currentStep].content}</div>

      {/* Navigation Buttons */}
      <div className="flex justify-between">
        <button
          onClick={handlePrev}
          disabled={isFirstStep}
          className={`btn-outline ${isFirstStep ? "opacity-5" : "opacity-100"}`}
        >
          Previous
        </button>
        <button
          onClick={handleNext}
          disabled={isLastStep}
          className={`btn-outline ${isLastStep ? "opacity-5" : "opacity-100"}`}
        >
          Next
        </button>
      </div>
    </div>
  );
}