import Image from "next/image";
import type { CartProduct } from "@/data/cart";
import { cartAssets } from "@/data/cart";
import { checkoutCopy } from "@/data/checkout";

const iconImgStyle = { width: "auto", height: "auto" } as const;
const THUMB = 72;

export type CheckoutSummaryItem = {
  product: CartProduct;
  quantity: number;
  lineTotal: number;
};

type CheckoutOrderSummaryProps = {
  items: CheckoutSummaryItem[];
  subtotal: number;
  shipping: number;
  total: number;
  formatMoneyWhole: (n: number) => string;
  formatMoneyTable: (n: number) => string;
};

export default function CheckoutOrderSummary({
  items,
  subtotal,
  shipping,
  total,
  formatMoneyWhole,
  formatMoneyTable,
}: CheckoutOrderSummaryProps) {
  return (
    <div
      className="order-summary"
      data-aos="fade-left"
      data-aos-duration={900}
      data-aos-delay={300}
    >
      <h3 className="summary-title">Order Summary</h3>
      {items.map(({ product, quantity, lineTotal }) => (
        <div className="product" key={product.id}>
          <div className="product-img3">
            <Image
              src={product.imageSrc}
              alt={product.imageAlt}
              width={THUMB}
              height={THUMB}
              style={iconImgStyle}
            />
          </div>
          <div className="product-info">
            <span>
              {product.title}
              {quantity > 1 ? ` × ${quantity}` : null}
            </span>
            <strong>{formatMoneyWhole(lineTotal)}</strong>
          </div>
        </div>
      ))}
      <div className="price-list3">
        <div className="price-row3">
          <span>Subtotal</span>
          <span>{formatMoneyTable(subtotal)}</span>
        </div>
        <div className="price-row3">
          <span>Shipping</span>
          <span>{formatMoneyTable(shipping)}</span>
        </div>
        <div className="price-row3 total">
          <span>Total</span>
          <span>{formatMoneyTable(total)}</span>
        </div>
      </div>
      <h4 className="summary-title">Payment Information</h4>
      <label className="payment-option">
        <input type="radio" name="payment" defaultChecked={true} />
        Direct Bank Transfer
      </label>
      <p className="payment-text">{checkoutCopy.paymentBankDescription}</p>
      <label className="payment-option">
        <input type="radio" name="payment" />
        Check Payment
      </label>
      <label className="payment-option">
        <input type="radio" name="payment" />
        Cash on Delivery
      </label>
      <p className="policy">{checkoutCopy.policy}</p>
      <button type="submit" className="btn-style1">
        Place Order
        <span>
          <Image
            src={cartAssets.arrowIcon}
            alt="Arrow Icon for Place Order"
            width={14}
            height={14}
          />
        </span>
      </button>
    </div>
  );
}