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;
    total: number;
    onConfirm?: () => void;
    confirmHref?: string;
    confirmLabel?: string;
    onDownloadInvoice?: () => void;
    className?: string;
};

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-sm font-light">{label}</div>
            <div className={emphasize ? "font-semibold" : "font-light"}>
                {typeof value === "number" ? NumberFormat(value) : value}
            </div>
        </div>
    );
};

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

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

            <div className="mt-6 space-y-5">
                <Row label="قیمت کالاها" value={itemsPrice} />
                <Row label="تخفیف" value={discount} />
                <Row label="جمع فاکتور" value={total} emphasize />
            </div>

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

export default CartSummary;