"use client";

import React from "react";
import { useFormatCurrency } from "@/shared/hooks";

interface InvoiceTotalsProps {
  subtotal: number;
  tax: number;
  total: number;
}

export function InvoiceTotals({ subtotal, tax, total }: InvoiceTotalsProps) {
  const { formatCurrency } = useFormatCurrency();

  return (
    <div className="bg-card rounded-2xl border border-border overflow-hidden">
      <div className="px-6 py-5 bg-muted/50 border-b border-border">
        <h3 className="text-base font-semibold text-foreground">Invoice Summary</h3>
      </div>
      <div className="px-6 py-5">
        <div className="space-y-4">
          <div className="flex justify-between items-center">
            <span className="text-sm text-muted-foreground">Subtotal</span>
            <span className="text-sm font-semibold text-foreground">
              {formatCurrency(subtotal)}
            </span>
          </div>

          {tax > 0 && (
            <div className="flex justify-between items-center">
              <span className="text-sm text-muted-foreground">Tax</span>
              <span className="text-sm font-semibold text-foreground">{formatCurrency(tax)}</span>
            </div>
          )}

          <div className="border-t border-border pt-4">
            <div className="flex justify-between items-center">
              <span className="text-base font-semibold text-foreground">Total</span>
              <span className="text-xl font-bold text-foreground">{formatCurrency(total)}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export type { InvoiceTotalsProps };
