"use client";

import { Separator } from "@heroui/react";
import { formatPrice } from "@repo/utils";

type CheckoutOrderSummaryProps = {
  subtotal: number;
  itemCount: number;
};

export function CheckoutOrderSummary({
  subtotal,
  itemCount,
}: CheckoutOrderSummaryProps) {
  return (
    <section aria-label="Order summary">
      <h2 className="mb-3 text-lg font-semibold font-[family-name:var(--font-fraunces)]">
        Summary
      </h2>
      <dl className="flex flex-col gap-3">
        <div className="flex items-center justify-between text-sm">
          <dt className="text-default-500">
            Items ({itemCount})
          </dt>
          <dd className="font-semibold text-foreground">
            {formatPrice(subtotal)}
          </dd>
        </div>
        <div className="flex items-center justify-between text-sm">
          <dt className="text-default-500">Shipping</dt>
          <dd className="text-default-400">Calculated at next step</dd>
        </div>
        <Separator />
        <div className="flex items-center justify-between">
          <dt className="font-medium text-foreground">Subtotal</dt>
          <dd className="text-lg font-bold text-[#236f6b]">
            {formatPrice(subtotal)}
          </dd>
        </div>
      </dl>
    </section>
  );
}
