"use client";

import TimelineStep from "./TimelineStep";
import { useLocaleDirection } from "@/hooks/useLocale";

interface Step {
  title: string;
  description: string;
}

interface TimelineStepsProps {
  steps: Step[];
}

export default function TimelineSteps({ steps }: TimelineStepsProps) {
  const { isRTL } = useLocaleDirection();

  return (
    <div className="flex flex-col gap-6 md:gap-8 relative">
      <div
        className={`absolute top-0 bottom-0 w-[2px] bg-secondary-main opacity-30 ${
          isRTL ? "right-[5px]" : "left-[5px]"
        }`}
      ></div>

      {steps.map((step, index) => (
        <TimelineStep
          key={index}
          title={step.title}
          description={step.description}
        />
      ))}
    </div>
  );
}