import type { CSSProperties } from "react";
import { AnimatedMoney } from "@/components/animated-money";

export type Estimate = {
  months: number;
  rate: number;
  monthly_payment: number;
  total_repayment: number;
  total_interest: number;
};

export function RepaymentSummary({ estimate: e }: { estimate: Estimate }) {
  const principal =
    Math.round((e.total_repayment - e.total_interest) * 100) / 100;
  const interestShare = (e.total_interest / e.total_repayment) * 100;
  const interestPercent = Math.round(interestShare);
  return (
    <div className="repayment-summary" aria-live="polite" aria-atomic="true">
      <h3>Repayment Summary</h3>
      <dl className="summary-headline">
        <div>
          <dt>Monthly repayment</dt>
          <dd className="monthly-repayment">
            <AnimatedMoney value={e.monthly_payment} />
          </dd>
          <dd className="summary-terms">
            for {e.months} {e.months === 1 ? "month" : "months"} at {e.rate}%
            monthly interest
          </dd>
        </div>
      </dl>
      <div
        className="summary-split"
        aria-hidden="true"
        style={{ "--interest-share": `${interestShare}%` } as CSSProperties}
      >
        <div className="summary-split-bar">
          <span />
        </div>
        <p>
          <span>Principal {100 - interestPercent}%</span>
          <span>Interest {interestPercent}%</span>
        </p>
      </div>
      <dl className="summary-totals">
        <div className="summary-loan">
          <dt>Loan amount</dt>
          <dd>
            <AnimatedMoney value={principal} />
          </dd>
        </div>
        <div className="summary-interest">
          <dt>Total interest</dt>
          <dd>
            <AnimatedMoney value={e.total_interest} />
          </dd>
        </div>
        <div className="summary-total">
          <dt>Total repayment</dt>
          <dd className="total-repayment">
            <AnimatedMoney value={e.total_repayment} />
          </dd>
        </div>
      </dl>
    </div>
  );
}