"use client";

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

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

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

  return (
    <div className="bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
      <div className="px-8 py-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-6">Invoice Summary</h3>

        <div className="space-y-4">
          <div className="flex justify-between items-center text-slate-600">
            <span className="font-medium">Subtotal</span>
            <span className="font-semibold text-slate-900">{formatCurrency(subtotal)}</span>
          </div>

          {tax > 0 && (
            <div className="flex justify-between items-center text-slate-600">
              <span className="font-medium">Tax</span>
              <span className="font-semibold text-slate-900">{formatCurrency(tax)}</span>
            </div>
          )}

          <div className="border-t border-slate-300 pt-4 mt-6">
            <div className="flex justify-between items-center">
              <span className="text-xl font-bold text-slate-900">Total Amount</span>
              <div className="flex items-baseline gap-2">
                <div className="text-3xl font-bold text-slate-900">{formatCurrency(total)}</div>
                <div className="text-lg font-medium text-slate-500">JPY</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export type { InvoiceTotalsProps };
