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

interface Props {
  subtotal: number;
  shipping: number;
  tax: number;
  discount: number;
  total: number;
  currency: string;
}

export function OrderPriceSummary({
  subtotal,
  shipping,
  tax,
  discount,
  total,
  currency,
}: Props) {
  return (
    <Card className="rounded-xl p-5">
      <Card.Header>
        <Card.Title className="text-base">Order Summary</Card.Title>
      </Card.Header>
      <Card.Content>
        <dl className="space-y-2 text-sm">
          <div className="flex justify-between">
            <dt className="text-gray-500">Subtotal</dt>
            <dd className="font-medium text-[#1a2e2d]">
              {formatPrice(subtotal, currency)}
            </dd>
          </div>
          <div className="flex justify-between">
            <dt className="text-gray-500">Shipping</dt>
            <dd className="font-medium text-[#1a2e2d]">
              {shipping === 0 ? "Free" : formatPrice(shipping, currency)}
            </dd>
          </div>
          {tax > 0 && (
            <div className="flex justify-between">
              <dt className="text-gray-500">Tax</dt>
              <dd className="font-medium text-[#1a2e2d]">
                {formatPrice(tax, currency)}
              </dd>
            </div>
          )}
          {discount > 0 && (
            <div className="flex justify-between">
              <dt className="text-gray-500">Discount</dt>
              <dd className="font-medium text-[#f2705a]">
                -{formatPrice(discount, currency)}
              </dd>
            </div>
          )}

          <Separator className="my-2" />

          <div className="flex justify-between pt-1">
            <dt className="text-base font-semibold text-[#1a2e2d]">Total</dt>
            <dd className="text-base font-bold text-[#236f6b]">
              {formatPrice(total, currency)}
            </dd>
          </div>
        </dl>
      </Card.Content>
    </Card>
  );
}
