shop-front/src/components/CartSummary.tsx

"use client";

import { NumberFormat } from "@/config/func";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { FC } from "react";

type CartSummaryProps = {
    itemsCount: number;
    itemsPrice: number;
    discount: number;
    shippingCost?: number;
    total: number;
    onConfirm?: () => void;
    confirmHref?: string;
    confirmLabel?: string;
    confirmDisabled?: boolean;
    onDownloadInvoice?: () => void;
    className?: string;
    isLoading?: boolean;
};

const Row: FC<{ label: string; value: string | number; emphasize?: boolean }> = (
    { label, value, emphasize }
) => {
    return (
        <div className="flex items-center justify-between text-[#333333]">
            <div className="text-xs sm:text-sm font-light">{label}</div>
            <div className={`text-sm sm:text-base ${emphasize ? "font-semibold" : "font-light"}`}>
                {typeof value === "number" ? NumberFormat(value) : value}
            </div>
        </div>
    );
};

const CartSummary: FC<CartSummaryProps> = (props) => {
    const { itemsCount, itemsPrice, discount, shippingCost, total, onConfirm, onDownloadInvoice, className, confirmHref, confirmLabel, confirmDisabled, isLoading } = props;

    return (
        <div className={"rounded-xl sm:rounded-2xl border border-border p-4 sm:p-6 h-fit bg-[#FAFAFA] " + (className ?? "")}>
            <div className="flex items-center justify-between">
                <div className="text-xs sm:text-sm text-muted-foreground">تعداد کالاها</div>
                <div className="text-sm sm:text-base font-medium">{NumberFormat(itemsCount)} محصول</div>
            </div>

            <div className="mt-4 sm:mt-6 space-y-3 sm:space-y-5">
                <Row label="قیمت کالاها" value={itemsPrice} />
                <Row label="تخفیف" value={discount} />
                {shippingCost !== undefined && shippingCost > 0 && (
                    <Row label="هزینه ارسال" value={shippingCost} />
                )}
                <Row label="جمع فاکتور" value={total} emphasize />
            </div>

            <div className="mt-6 sm:mt-8 space-y-2 sm:space-y-3">
                {onDownloadInvoice && (
                    <Button
                        type="button"
                        onClick={() => onDownloadInvoice?.()}
                        className="w-full h-10 sm:h-12 rounded-lg sm:rounded-xl bg-[#303030] text-white shadow hover:bg-[#303030]/90 text-sm sm:text-base"
                    >
                        دانلود پیش‌فاکتور
                    </Button>
                )}
                <Button
                    type="button"
                    onClick={() => !confirmHref && onConfirm?.()}
                    disabled={isLoading || confirmDisabled}
                    className="w-full h-10 sm:h-12 rounded-lg sm:rounded-xl text-white text-sm sm:text-base disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    {confirmHref && !confirmDisabled ? (
                        <Link href={confirmHref} className="w-full h-full flex items-center justify-center">
                            {confirmLabel ?? "تایید و تکمیل سفارش"}
                        </Link>
                    ) : (
                        isLoading ? "در حال پردازش..." : (confirmLabel ?? "تایید و تکمیل سفارش")
                    )}
                </Button>
            </div>
        </div>
    );
};

export default CartSummary;