Currency Input

'use client';

import './CurrencyInput.css';

/**
 * CurrencyInput — A numeric input prefixed with a currency symbol for financial data entry.
 * 
 * @param {string} label - Input labeling title.
 * @param {string} id - HTML ID for attribution.
 * @param {string} symbol - Currency symbol to display (e.g. "$", "€"). Default is "$".
 * @param {number} value - Pre-filled numeric value.
 * @param {string} name - HTML name binding.
 * @param {number} step - Numeric increment. Default is 0.01.
 */
export interface CurrencyInputProps {
  label: string;
  id: string;
  symbol?: string;
  value?: number;
  name?: string;
  step?: number;
}

export function CurrencyInput({ label, id, symbol = "$", value = 0.00, name, step = 0.01 }: CurrencyInputProps) {
  return (
    <>
      <div className="curr-input-container" data-rk-a847a3="">
        <label htmlFor={id} className="curr-label" data-rk-a847a3="">{label}</label>
        <div className="curr-wrap" data-rk-a847a3="">
          <span className="curr-symbol" data-rk-a847a3="">{symbol}</span>
          <input type="number" id={id} name={name} step={step} defaultValue={value.toFixed(2)} className="curr-field" data-rk-a847a3="" />
        </div>
      </div>
    </>
  );
}

export default CurrencyInput;

/* CurrencyInput — ported from astro-component-kit (forms/CurrencyInput.astro) */

.curr-input-container:where([data-rk-a847a3]) { display: flex; flex-direction: column; gap: var(--sp-2, 0.5rem); width: 100%; }
.curr-label:where([data-rk-a847a3]) { font-size: 0.85rem; font-weight: 600; color: var(--c-text-2, #94a3b8); margin-left: 0.5rem; }

.curr-wrap:where([data-rk-a847a3]) { 
  display: flex; align-items: center; 
  background: var(--c-bg-elev, rgba(255,255,255,0.05)); 
  border-radius: var(--r-md, 12px); 
  border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
  overflow: hidden; 
  transition: border-color 0.2s;
}
.curr-wrap:focus-within:where([data-rk-a847a3]) { border-color: var(--c-primary, #6366f1); }

.curr-symbol:where([data-rk-a847a3]) { 
  padding: 0.8rem 1rem; 
  background: rgba(255,255,255,0.05); 
  color: var(--c-text-2, #94a3b8); 
  font-weight: 700; border-right: 1px solid var(--c-border, rgba(255,255,255,0.1));
}

.curr-field:where([data-rk-a847a3]) { 
  background: none; border: none; 
  padding: 0.8rem 1rem; 
  color: var(--c-text-1, #fff); 
  font-size: 1.1rem; width: 100%; outline: none; 
  font-family: inherit; font-weight: 600;
}

/* Remove number spins */
.curr-field:where([data-rk-a847a3])::-webkit-inner-spin-button, 
.curr-field:where([data-rk-a847a3])::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }