import { Check } from 'lucide-react';

export const STAGES = [
  ['create', 'Create Design'],
  ['arrange', 'Arrange'],
  ['behaviour', 'Set Behaviour'],
  ['save', 'Save Master'],
  ['cover', 'Choose Cover'],
  ['fit', 'Preview Fit'],
  ['variant', 'Create Variant']
];

export default function CanvasWorkflowStrip({ current, reached, onJump }) {
  const reachedIdx = reached;
  const curIdx = STAGES.findIndex(s => s[0] === current);
  return (
    <div className="panel flex items-center gap-1 overflow-x-auto px-3 py-2">
      {STAGES.map(([k, label], i) => {
        const complete = i < curIdx;
        const isCurrent = i === curIdx;
        const reachable = i <= reachedIdx;
        return (
          <div key={k} className="flex items-center">
            <button
              disabled={!reachable}
              onClick={() => reachable && onJump(k)}
              className={`flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs transition ${isCurrent ? 'wf-current' : complete ? 'wf-complete' : reachable ? 'text-slate-300 hover:bg-white/[0.03]' : 'cursor-not-allowed text-slate-600'}`}
            >
              <span className={`grid h-6 w-6 place-items-center rounded-md border text-[11px] font-semibold ${isCurrent ? 'border-cyan-400 bg-cyan-400/20 text-cyan-50' : complete ? 'border-cyan-400/40 bg-cyan-400/10 text-cyan-200' : 'border-white/10 bg-white/[0.02] text-slate-500'}`}>
                {complete ? <Check size={12} /> : i + 1}
              </span>
              <span className="whitespace-nowrap font-medium">{label}</span>
            </button>
            {i < STAGES.length - 1 && <span className={`mx-0.5 h-px w-5 ${i < curIdx ? 'bg-cyan-400/40' : 'bg-white/10'}`} />}
          </div>
        );
      })}
    </div>
  );
}