"use client";

import { Card, Separator } from "@heroui/react";
import { formatPrice } from "@repo/utils";
import type { CartOrderSummaryProps } from "@/lib/cart/types";

type CartSummaryCardProps = CartOrderSummaryProps & {
  /** "card" wraps in a HeroUI Card (full page); "inline" renders bare (overlays). */
  display?: "card" | "inline";
};

export function CartSummaryCard({
  subtotal,
  display = "card",
}: CartSummaryCardProps) {
  const content = (
    <div className="flex flex-col gap-3">
      {display === "card" && (
        <h2 className="text-lg font-semibold font-[family-name:var(--font-fraunces)]">
          Order Summary
        </h2>
      )}
      <div className="flex items-center justify-between text-sm">
        <span className="text-[var(--muted)]">Subtotal</span>
        <span className="font-semibold text-[var(--foreground)]">
          {formatPrice(subtotal)}
        </span>
      </div>
      <div className="flex items-center justify-between text-sm">
        <span className="text-[var(--muted)]">Shipping</span>
        <span className="text-[var(--muted)]">Calculated at checkout</span>
      </div>
      <Separator />
      <div className="flex items-center justify-between">
        <span className="font-medium text-[var(--foreground)]">Total</span>
        <span className="text-lg font-bold text-[#236f6b]">
          {formatPrice(subtotal)}
        </span>
      </div>
    </div>
  );

  if (display === "inline") {
    return (
      <section aria-label="Order summary">
        {content}
      </section>
    );
  }

  return (
    <Card  className="p-4 rounded-lg">
      <Card.Content className="p-0">
        <section aria-label="Order summary">
          {content}
        </section>
      </Card.Content>
    </Card>
  );
}
