/**
 * 驗收頁面 - 金額統計卡片 (Level 3)
 */

import { TrendingDown } from "lucide-react";
import { formatCurrency } from "../../utils/purchase-order";

interface InspectionAmountSummaryProps {
  originalAmount: number;
  actualAmount: number;
}

export function InspectionAmountSummary({
  originalAmount,
  actualAmount,
}: InspectionAmountSummaryProps) {
  const hasDifference = originalAmount !== actualAmount;
  const difference = originalAmount - actualAmount;

  return (
    <div className="bg-card rounded-lg border-2 border-border p-6">
      <h3 className="mb-4">金額統計</h3>

      <div className="space-y-4">
        {/* 原訂金額 */}
        <div className="flex justify-between items-center">
          <span className="text-muted-foreground">原訂金額</span>
          <span>{formatCurrency(originalAmount)}</span>
        </div>

        {/* 實收金額 */}
        <div className="flex justify-between items-center pt-4 border-t border-border">
          <span className="text-muted-foreground">實收金額</span>
          <span className="text-primary-main">
            {formatCurrency(actualAmount)}
          </span>
        </div>

        {/* 差額（僅在有差異時顯示） */}
        {hasDifference && (
          <div className="flex items-center justify-between pt-2 text-warning">
            <div className="flex items-center gap-2">
              <TrendingDown className="h-4 w-4" />
              <span className="caption">金額差異</span>
            </div>
            <span className="caption">
              - {formatCurrency(difference)}
            </span>
          </div>
        )}
      </div>
    </div>
  );
}
