"use client";
import { Steps } from "antd";
import { useTranslations } from "next-intl";

const OrderSteps = ({status,stepsData,}: {status: string;stepsData: any;}) => {
  const t = useTranslations();
  const { Step } = Steps;

  const cancelSteps = (stepsData && typeof stepsData === "object")
  ? Object.entries(stepsData).map(([key, value]) => ({
      title: key.replace("_at", ""),
      description: value,
    }))
  : [];
  cancelSteps.shift();
  
  return (
    <div className="order-details-card">
      <h2 className="text-lg font-bold mb-4 ">{t("orders.follow_order")}</h2>

      {status == "cancelled" ? (
        <>
          <Steps
            className="order-steps"
            direction="vertical"
            current={1}
            status="error"

          >
          <Step
            title={t("status.pending_at")}
            description={stepsData?.pending_at || stepsData?.created_at}
          />
          <Step
            title={t("status.cancelled")}
            description={stepsData?.cancelled_at }
          />
          </Steps>
        </>
      ) : (
        <Steps
          className="order-steps"
          direction="vertical"
          current={stepsData ? Object.values(stepsData).length - 1 : 0}
          status="finish"
        >
          <Step
            title={t("status.pending_at")}
            description={stepsData?.pending_at || stepsData?.created_at}
          />
          <Step
            title={t("status.preparing_at")}
            description={stepsData?.prepare_at }
          />

          <Step
            title={t("status.shipped")}
            description={stepsData?.shipped_at}
          />
          <Step
            title={t("status.completed")}
            description={stepsData?.completed_at}
          />
        </Steps>
      )}
    </div>
  );
};

export default OrderSteps;