"use client";

import { useState } from "react";
import type { ProcessStep } from "@/data/home/process";

/** Mirrors crm-html main.js `UIActiveManager.initStepCards` — first card `.active`, swap on hover. */
export default function WorkingProcessCards({ steps }: { steps: ProcessStep[] }) {
  const [activeId, setActiveId] = useState(steps[0]?.id ?? 0);

  return (
    <div className="working-info">
      {steps.map((step) => (
        <div
          key={step.id}
          className={`step-card${activeId === step.id ? " active" : ""}`}
          onMouseEnter={() => setActiveId(step.id)}
        >
          <span className="num">{step.stepNumber}</span>
          <div className="working-content">
            <h3 className="title">{step.title}</h3>
            <p>{step.description}</p>
          </div>
        </div>
      ))}
    </div>
  );
}