import { ArrowRight } from "lucide-react";
import { CartDetail } from "src/api/types";
import SellerLogo from "../SellerLogo";
import { useNavigate } from "@remix-run/react";
import { safeGoBack } from "~/utils/helpers";

interface CartHeaderProps {
  cart: CartDetail | null | undefined;
  step: number;
  setStep: React.Dispatch<React.SetStateAction<number>>;
}

export const CartHeader = ({ cart, step, setStep }: CartHeaderProps) => {
  const navigate = useNavigate();
  return (
  <div
    className={`flex flex-col gap-3 pt-4 sticky top-0 z-30 bg-WHITE w-full items-center justify-center ${step !== 0 ? "pb-4" : ""}`}
  >
    <p className={"text-B16 font-bold px-4"}>
      {step === 0
        ? "سبد خرید"
        : step === 1
          ? "اطلاعات ارسال"
          : "اطلاعات تحویل گیرنده وپرداخت"}
    </p>

    <ArrowRight
      onClick={() => {
        if (step > 0) setStep((p) => p - 1);
        else safeGoBack(navigate);
      }}
      className="absolute top-4 right-4"
    />
    {cart && cart.items && cart.items.length > 0 && (
      <>
        <StepIndicator currentStep={step} />
        {step === 0 && (
          <a
            href={`/seller/${cart.seller?.username}`}
            className="flex px-4 gap-2 h-[65px] border-b w-full justify-center items-center"
          >
            <SellerLogo
              size="sm"
              src={cart.seller?.logo}
              alt={"seller-image"}
            />
            <div className="flex flex-col items-center justify-center">
              <p className="text-B12 font-bold text-overflow-ellipsis overflow-hidden whitespace-nowrap">
                {cart.seller?.name}
              </p>
            </div>
          </a>
        )}
      </>
    )}
  </div>
);
};

// Step Indicator Component
const StepIndicator = ({ currentStep }: { currentStep: number }) => (
  <div className="w-full px-4 gap-4 flex pt-2">
    {Array(3)
      .fill(0)
      .map((_, index) => (
        <div
          key={index}
          className={`w-full h-[6px] rounded-md ${
            currentStep >= index ? "bg-BLACK" : "bg-GRAY2"
          }`}
        />
      ))}
  </div>
);