import type { Locale } from "@/content/site";
import { methodSteps, sectionLabels } from "@/content/pageContent";

export function ProcessTimeline({
  locale,
  title,
}: {
  locale: Locale;
  title: string;
}) {
  return (
    <section className="method-section">
      <div className="shell">
        <p className="kicker">{sectionLabels[locale].method}</p>
        <h2>{title}</h2>
        <ol className="method-list">
          {methodSteps[locale].map((item, index) => (
            <li key={item} data-reveal>
              <span>{String(index + 1).padStart(2, "0")}</span>
              {item}
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}