import { Loader2 } from "lucide-react";
import { formatPrice } from "../../utils/helpers";
import { Button } from "../ui/button";

interface CartSummaryProps {
  total: string;
  onContinue: () => void;
  step: number;
  isLoading: boolean;
}

export const CartSummary = ({
  total,
  onContinue,
  step,
  isLoading,
}: CartSummaryProps) => (
  <div className="max-w-md mx-auto fixed flex flex-row gap-2 w-full bottom-[50px] left-0 right-0 border-t py-1 px-2 z-50 bg-WHITE lg:static lg:max-w-none lg:mx-0 lg:bottom-auto lg:flex-col-reverse lg:gap-4 lg:border lg:border-WHITE3 lg:rounded-xl lg:p-5 lg:z-auto">
    <Button
      variant="dark"
      size="lg"
      className="w-full flex-1 font-bold bg-VITROWN_BLUE active:bg-VITROWN_BLUE hover:bg-VITROWN_BLUE  text-white"
      onClick={onContinue}
      disabled={isLoading}
    >
      {isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
      {step === 0 || step === 1 ? "ثبت و ادامه" : "تایید و پرداخت"}
    </Button>
    <div className="flex-1 gap-2 w-full flex flex-col items-center justify-center">
      <p className="text-B14 font-bold text-GRAY">مبلغ کل فاکتور:</p>
      <p className="text-B14 font-bold">{formatPrice(total)} تومان</p>
      {step === 2 && (
        <p className="text-R10 text-GRAY">۱۰٪ مالیات به مبلغ نهایی اضافه می‌شود</p>
      )}
    </div>
  </div>
);