import React from 'react';
import { useTranslation } from 'react-i18next';

interface WizardStepperProps {
  currentStep: number; // 0~3, matching wizardStep in GenerationFlow
}

const WizardStepper: React.FC<WizardStepperProps> = ({ currentStep }) => {
  const { t } = useTranslation();

  const steps = [
    t('wizardSteps.brandAnalysis'),
    t('wizardSteps.asset'),
    t('wizardSteps.sound'),
    t('wizardSteps.video'),
  ];

  return (
    <div className="wizard-stepper">
      {steps.map((label, index) => {
        const isDone = index < currentStep;
        const isCurrent = index === currentStep;
        const stateClass = isDone ? ' done' : isCurrent ? ' current' : ' pending';

        return (
          <React.Fragment key={index}>
            {/* 노드: 2rem 고정 너비. 라벨은 absolute로 노드 중심 아래에 붙음 */}
            <div className={`wizard-step${stateClass}`}>
              <div className="wizard-stepper-node">
                {isDone ? (
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M2.5 7L5.5 10L11.5 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                ) : (
                  <span>{index + 1}</span>
                )}
              </div>
              <span className="wizard-stepper-label">{label}</span>
            </div>

            {/* 연결선: flex:1로 남은 공간을 균등하게 채움 */}
            {index < steps.length - 1 && (
              <div className={`wizard-step-line${isDone ? ' done' : ''}`} />
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
};

export default WizardStepper;