"use client";
import { useTranslations } from "next-intl";
import { Loader } from "lucide-react";
import { RS } from "@/shared/Icons";
import MediaWithFallback from "@/shared/MediaWithFallback";
type Props = {
  subTotal: number;
  totalPrice: number;
  shipping_price: number;
  items: any[];
  isLoadingOrder: boolean;
  isLoading: boolean;
};
export default function CheckoutSummary({
  subTotal,
  totalPrice,
  shipping_price,
  items,
  isLoadingOrder,
  isLoading,
}: Props) {
  const t = useTranslations();

  return (
    <div className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 lg:p-8 p-4 sticky top-28 h-fit">
      <h3 className="text-xl mb-6">{t("Text.orderSummary")}</h3>
      <div className="space-y-3 mb-6 max-h-60 overflow-y-auto">
        {items?.map((item: any, index: number) => (
          <div key={index} className="flex gap-3 pb-3 border-b border-gray-200">
            <MediaWithFallback
              src={item?.product?.image}
              alt={item?.product?.name}
              className="w-16 h-16 object-cover rounded"
            />
            <div className="flex-1 min-w-0">
              <p className="text-sm line-clamp-1">{item?.product?.name}</p>
              <p className="text-xs text-text-secondary">
                {t("validations.Quantity")}: {item?.amount}
              </p>
              <p className="text-sm text-primary flex items-center gap-1">
                {item?.total_price} <RS className="size-5 *:fill-primary" />
              </p>
            </div>
          </div>
        ))}
      </div>
      <div className="space-y-3 mb-6">
        <div className="flex justify-between text-text-secondary">
          <span>{t("Text.subtotal")}</span>
          <span className="flex items-center gap-1">
            {subTotal} <RS className="size-5 *:fill-text-secondary" />
          </span>
        </div>
        <div className="flex justify-between text-text-secondary">
          <span>{t("Text.shipping")}</span>
          <span className="flex items-center gap-1">
            {shipping_price} <RS className="size-5 *:fill-text-secondary" />
          </span>
        </div>
        <div className="border-t border-gray-200 pt-3 flex justify-between">
          <span>{t("Text.total")}</span>
          <span className="text-xl text-primary flex items-center gap-1">
            {totalPrice} <RS className="size-5 *:fill-primary" />
          </span>
        </div>
      </div>
      <button
        type="submit"
        className="flex gap-3 items-center justify-center cursor-pointer mt-3 text-center w-full bg-primary text-white p-3 rounded-xl hover:bg-white hover:text-primary border-2 border-primary transition-colors font-semibold"
        disabled={isLoading || isLoadingOrder}
      >
        {t("BUTTONS.followPayment")}
        {isLoading ||
          (isLoadingOrder && (
            <Loader className="w-8 h-8 text-white bg-transparent !animate-spin" />
          ))}
      </button>
    </div>
  );
}