import React from "react";
import { DetailedAnalytic } from "@/hooks/useAssetAnalyticsReport";
import { formatCurrency } from "@/lib/asset-analytics-utils";

interface FeesSectionProps {
  asset: DetailedAnalytic;
}

export const FeesSection: React.FC<FeesSectionProps> = ({ asset }) => {
  const totalFees = parseFloat(asset.fees.commission) + parseFloat(asset.fees.b_1) + parseFloat(asset.fees.b_2);

  return (
    <div className="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
      <div className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
        <h3 className="text-sm font-semibold text-slate-700 mb-3">Fees Paid</h3>
        <div className="space-y-2 text-sm">
          <div className="flex justify-between">
            <span className="text-slate-600">Commission:</span>
            <span className="font-medium">{formatCurrency(asset.fees.commission, asset.market_value.currency)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-slate-600">Charges And Fees Abroad:</span>
            <span className="font-medium">{formatCurrency(asset.fees.b_1, asset.market_value.currency)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-slate-600">Federal Turnover Tax:</span>
            <span className="font-medium">{formatCurrency(asset.fees.b_2, asset.market_value.currency)}</span>
          </div>
          <div className="flex justify-between border-t border-slate-200 pt-2 font-semibold">
            <span className="text-slate-700">Total:</span>
            <span>{formatCurrency(totalFees, asset.market_value.currency)}</span>
          </div>
        </div>
      </div>
      
      <div className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
        <h3 className="text-sm font-semibold text-slate-700 mb-3">Fees Paid (USD)</h3>
        <div className="space-y-2 text-sm">
          <div className="flex justify-between">
            <span className="text-slate-600">Commission:</span>
            <span className="font-medium">{formatCurrency(asset.fees.commission, asset.market_value.currency)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-slate-600">Charges And Fees Abroad:</span>
            <span className="font-medium">{formatCurrency(asset.fees.b_1, asset.market_value.currency)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-slate-600">Federal Turnover Tax:</span>
            <span className="font-medium">{formatCurrency(asset.fees.b_2, asset.market_value.currency)}</span>
          </div>
          <div className="flex justify-between border-t border-slate-200 pt-2 font-semibold">
            <span className="text-slate-700">Total:</span>
            <span>{formatCurrency(totalFees, asset.market_value.currency)}</span>
          </div>
        </div>
      </div>
    </div>
  );
};