import React from "react";
import { cn } from "@/lib/utils";
import { Slider } from "./slider";

/**
 * Right-sidebar organism for the Borrowing Capacity page.
 *
 * Shows the current interest rate used in the calculation along with the
 * resulting buying power and estimated repayments. The slider lets the user
 * explore how different rates affect their borrowing capacity.
 *
 * This is a **controlled** component — the consumer owns `rate` and
 * `onRateChange`; no internal state is held.
 */

export interface InterestRateUsedProps {
  /** Current interest rate (%) — drives the slider position */
  rate: number;
  /** Called when the slider is moved */
  onRateChange: (rate: number) => void;
  /** Pre-formatted buying power string, e.g. "$957.53K" */
  buyingPowerFormatted: string;
  /** Pre-formatted repayments string, e.g. "$2.66K" */
  repaymentsFormatted: string;
  /** Minimum rate (default: 0) */
  minRate?: number;
  /** Maximum rate (default: 13) */
  maxRate?: number;
  /** Slider step (default: 0.01) */
  rateStep?: number;
  className?: string;
}

export function InterestRateUsed({
  rate,
  onRateChange,
  buyingPowerFormatted,
  repaymentsFormatted,
  minRate = 0,
  maxRate = 13,
  rateStep = 0.01,
  className,
}: InterestRateUsedProps) {
  return (
    <div
      className={cn(
        "flex flex-col items-center gap-3 border-b border-border px-4 py-4 text-center",
        className,
      )}
    >
      <p className="text-base font-bold text-foreground">Interest Rate Used</p>

      <div className="flex w-full justify-around gap-4">
        <div className="flex flex-col gap-0.5">
          <p className="text-sm text-muted-foreground">Current Buying Power</p>
          <p className="text-lg font-bold text-foreground">
            {buyingPowerFormatted}
          </p>
        </div>
        <div className="flex flex-col gap-0.5">
          <p className="text-sm text-muted-foreground">Repayments</p>
          <p className="text-lg font-bold text-foreground">
            {repaymentsFormatted}
          </p>
        </div>
      </div>

      <div className="flex w-full flex-col gap-2">
        <p className="text-sm font-semibold text-foreground">
          {rate.toFixed(2)}%
        </p>
        <Slider
          value={rate}
          min={minRate}
          max={maxRate}
          step={rateStep}
          onValueChange={onRateChange}
        />
      </div>
    </div>
  );
}