/**
* StepperNav Component
* Horizontal step navigation for the equalization explainer
*/
'use client';
import React from 'react';
import { useTranslations } from 'next-intl';
import { useVisualizerStore } from '@/hooks/useVisualizerStore';
import { TOTAL_EQUALIZATION_STEPS, EqualizationStep } from '@/lib/visualizer/equalization';
import { Check } from 'lucide-react';
export function StepperNav() {
const t = useTranslations('equalization');
const { equalizationStep, setEqualizationStep } = useVisualizerStore();
const steps = Array.from({ length: TOTAL_EQUALIZATION_STEPS }, (_, i) => i + 1) as EqualizationStep[];
return (
<div className="w-full">
{/* Step title */}
<div className="text-center mb-3">
<span className="text-sm text-text-secondary">
{t('stepOf', { current: equalizationStep, total: TOTAL_EQUALIZATION_STEPS })}
</span>
<h2 className="text-lg font-semibold text-text-primary mt-1">
{t(`steps.step${equalizationStep}.title`)}
</h2>
</div>
{/* Step indicators */}
<div className="flex items-center justify-center gap-1">
{steps.map((step, index) => {
const isActive = step === equalizationStep;
const isCompleted = step < equalizationStep;
const isClickable = true; // All steps are clickable
return (
<React.Fragment key={step}>
{/* Connector line */}
{index > 0 && (
<div
className={`h-0.5 w-6 sm:w-8 transition-colors ${
step <= equalizationStep ? 'bg-accent-red' : 'bg-border-subtle'
}`}
/>
)}
{/* Step circle */}
<button
onClick={() => isClickable && setEqualizationStep(step)}
disabled={!isClickable}
className={`
relative flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full
text-sm font-medium transition-all
${isActive
? 'bg-accent-red text-white ring-4 ring-accent-red/20'
: isCompleted
? 'bg-accent-red text-white'
: 'bg-bg-secondary text-text-tertiary hover:bg-bg-elevated hover:text-text-secondary'
}
${isClickable ? 'cursor-pointer' : 'cursor-default'}
`}
aria-label={t(`steps.step${step}.title`)}
aria-current={isActive ? 'step' : undefined}
>
{isCompleted ? (
<Check className="w-4 h-4 sm:w-5 sm:h-5" />
) : (
<span>{step}</span>
)}
</button>
</React.Fragment>
);
})}
</div>
</div>
);
}
