import { useTranslations } from "next-intl";
import { RS } from "@/shared/Icons";
import AppButton from "@/shared/buttons/AppButton";
import LocalePath from "@/shared/LocalePath";

export default function CartSummary({
  subTotal,
  totalPrice,
  shipping_price,
  tax_amount,
  mainLoader,
}: {
  subTotal: number;
  totalPrice: number;
  shipping_price: number;
  tax_amount: number;
  mainLoader: boolean;
}) {
  const t = useTranslations("");

  return (
    <div className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 p-6 !sticky !top-24 h-fit">
      <h3 className="text-xl mb-6">{t("Text.orderSummary")} </h3>
      <div className="space-y-3 mb-6">
        <div className="flex justify-between text-text-secondary">
          <span>{t("Text.subtotal")} </span>
          <div className="flex items-center gap-1.5">
            <RS className="*:fill-text-secondary" />
            <span>{subTotal}</span>
          </div>
        </div>
        <div className="flex justify-between text-text-secondary">
          <span>{t("Text.orderTax")} </span>
          <div className="flex items-center gap-1.5">
            <RS className="*:fill-text-secondary" />
            <span>{tax_amount}</span>
          </div>
        </div>
        <div className="flex justify-between text-text-secondary">
          <span>{t("Text.shipping")} </span>
          <div className="flex items-center gap-1.5">
            <RS className="*:fill-text-secondary" />
            <span>{shipping_price}</span>
          </div>
        </div>
        <div className="border-t border-gray-200 pt-3 flex justify-between">
          <span>{t("Text.totalAmount")} </span>
          <div className="flex items-center gap-2">
            <RS className="*:fill-primary" />
            <span className="text-xl text-primary">{totalPrice}</span>
          </div>
        </div>
      </div>
      <AppButton
        title={t("BUTTONS.completeOrder")}
        buttonType="button"
        path={`/checkout`}
        className="!w-full !h-[56px] !rounded-xl !mt-[10px] !font-medium !text-base mb-4"
      />
      <LocalePath
        href="/"
        className="w-full !text-text-primary bg-transparent border border-gray-200 text-base px-8 py-3.5 rounded-lg font-medium shadow-sm transition-all duration-300 flex justify-center items-center gap-2 group"
      >
        {t("BUTTONS.continueShopping")}
      </LocalePath>
    </div>
  );
}