"use client";

import { useTranslations } from "next-intl";
import SectionBadge from "@/components/shared/SectionBadge/Index";
import ButtonWithIcon from "@/components/shared/ButtonWithIcon/Index";
import TimelineSteps from "./TimelineSteps";

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

interface HowItWorksContentProps {
  steps: Step[];
}

export default function HowItWorksContent({ steps }: HowItWorksContentProps) {
  const t = useTranslations("howItWorks");

  return (
    <div className="flex flex-col gap-5 md:gap-10">
      <SectionBadge text={t("badge")} />
      <h1 className="font-bold text-white text-[24px] md:text-[40px]">
        {t("title")}
      </h1>

      <TimelineSteps steps={steps} />

      <div className="pt-4">
        <ButtonWithIcon>{t("getStarted")}</ButtonWithIcon>
      </div>
    </div>
  );
}