'use client';

import { Clock } from 'lucide-react';
import { useTranslations } from 'next-intl';


let currentStepOrder = 1; 

export default function TrackTimeline({ steps }: { steps: any[] }) {

  const t = useTranslations();

  currentStepOrder = steps.length - 1;
  return (
    <div className="mx-auto py-6">
      <h2 className="text-base font-medium text-neutrals600 mb-6 dark:text-neutrals400">{t("order_card.order_stepper.track_details")}</h2>
      <div className="space-y-6">
        {steps.map((step: any, index: number) => {
          const isCompleted = index < currentStepOrder;
          const isCurrent = index === currentStepOrder;

          return (
            <div key={index} className="flex items-start justify-between relative">
              {/* Date */}
              <div className="flex items-start gap-4 relative">
                <div
                  className={`text-xs font-medium text-center w-10 pr-6 rtl:pl-6 rtl:pr-0 ${isCurrent
                      ? 'text-primary500 dark:text-primary400'
                      : isCompleted
                        ? 'text-neutrals800 dark:text-neutrals400'
                        : 'text-neutrals800 dark:text-neutrals400'
                    }`}
                >
                  <div>{step.date.split('/')[0]}</div>
                  <div>{step.date.split('/')[1]}</div>
                </div>
                <div className="w-2 absolute mt-1 -ml-1 left-9 rtl:right-9 rtl:left-auto rtl:-mr-1 rtl:ml-0">
                  <div className={`w-2 h-2 rounded-full z-10 ${isCompleted
                      ? 'bg-neutrals800 dark:text-neutrals400 dark:bg-neutrals400'
                      : isCurrent
                        ? 'border border-kzblue50 bg-primary500 w-2.5 h-2.5'
                        : 'bg-neutrals300'
                    }`}
                  />
                  {index < steps.length - 0 && (
                    <div className={`w-px h-[43px] absolute top-3.5 left-1 -z-10 rtl:right-1 rtl:left-auto ${isCompleted ? 'bg-primary500 dark:bg-primary400' : 'bg-neutrals100'
                      }`}
                    />
                  )}
                </div>

                {/* Title & Description */}
                <div>
                  <p
                    className={`text-xs font-normal ${isCurrent
                        ? 'text-primary500 dark:text-primary400'
                        : isCompleted
                          ? 'text-neutrals500 dark:text-neutrals400'
                          : 'text-neutrals400'
                      }`}
                  >
                    {step.message}
                  </p>
                </div>
              </div>

              {/* Time */}
              <div className="flex items-center gap-1 text-xs text-neutrals600 dark:text-neutrals400">
                <Clock className="w-4 h-4" />
                <span className='whitespace-nowrap'>{step.time}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}