import { formatPrice } from "@repo/utils"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"

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

function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between text-sm">
      <span className="text-muted-foreground">{label}</span>
      <span>{value}</span>
    </div>
  )
}

export function OrderFinancialsCard({
  subtotal,
  shipping,
  discount,
  tax,
  total,
  currency,
}: Props) {
  const curr = currency.toUpperCase()

  return (
    <Card>
      <CardHeader>
        <CardTitle>Financials</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-2">
        <InfoRow label="Subtotal" value={formatPrice(subtotal, curr)} />
        <InfoRow label="Shipping" value={formatPrice(shipping, curr)} />
        {discount > 0 && (
          <InfoRow
            label="Discount"
            value={`-${formatPrice(discount, curr)}`}
          />
        )}
        {tax > 0 && <InfoRow label="Tax" value={formatPrice(tax, curr)} />}
        <Separator />
        <div className="flex items-center justify-between text-sm font-semibold">
          <span>Total</span>
          <span>{formatPrice(total, curr)}</span>
        </div>
      </CardContent>
    </Card>
  )
}
