interface Props {
  trackingStatus: string;
  orderDate: string;
}

const steps = [
  { key: "created", label: "تم الطلب" },
  { key: "shipment", label: "شحن" },
  { key: "delivered", label: "تسليم" },
];

export default function OrderTracking({ trackingStatus, orderDate }: Props) {
  const activeIndex = steps.findIndex((s) => s.key === trackingStatus);

  return (
    <div className="mt-4 mb-4">
      {/* date */}
      {/* <div className="text-sm text-gray-500 mb-3">
        تاريخ الطلب: {orderDate}
      </div> */}

      {/* timeline */}
      <div className="flex items-center justify-between relative">
        {/* الخط الخلفي */}
        <div className="absolute top-[6px] left-[calc(100%/6)] right-[calc(100%/6)] h-[2px] bg-gray-200" />

        {/* الخط النشط */}
        <div
          className="absolute top-[6px] left-[calc(100%/6)] h-[2px] bg-[#12B76A] transition-all"
          style={{
            width: `${(activeIndex / (steps.length - 1)) * 100}%`,
          }}
        />
        {steps.map((step, index) => {
          const isActive = index <= activeIndex;

          return (
            <div
              key={step.key}
              className="relative z-10 flex flex-col items-center w-full"
            >
              <span
                className={`w-3 h-3 rounded-full ${
                  isActive ? "bg-[#12B76A]" : "bg-gray-300"
                }`}
              />

              <span
                className={`text-xs mt-2 ${
                  isActive ? "text-[#12B76A]" : "text-gray-400"
                }`}
              >
                {step.label}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}