import React from 'react';
import CurrencyInput from './CurrencyInput';

interface FormCurrencyInputProps {
  label?: string;
  error?: string;
  hint?: string;
  value: number;
  onChange: (cents: number) => void;
  disabled?: boolean;
  required?: boolean;
  placeholder?: string;
  min?: number;
  max?: number;
  /** Container class name */
  containerClassName?: string;
  /** Input class name */
  className?: string;
}

/**
 * Form wrapper for CurrencyInput that adds label, error, and hint support.
 * Uses the ATM-style currency input where digits are entered as cents.
 */
export const FormCurrencyInput: React.FC<FormCurrencyInputProps> = ({
  label,
  error,
  hint,
  value,
  onChange,
  disabled = false,
  required = false,
  placeholder = '$0.00',
  min,
  max,
  containerClassName = '',
  className = '',
}) => {
  const baseInputClasses =
    'w-full px-3 py-2 border rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors';

  const stateClasses = error
    ? 'border-red-500 dark:border-red-500 focus:ring-red-500 focus:border-red-500'
    : 'border-gray-300 dark:border-gray-600';

  const disabledClasses = disabled
    ? 'bg-gray-100 dark:bg-gray-800 cursor-not-allowed opacity-60'
    : '';

  return (
    <div className={containerClassName}>
      {label && (
        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
          {label}
          {required && <span className="text-red-500 ml-1">*</span>}
        </label>
      )}

      <CurrencyInput
        value={value}
        onChange={onChange}
        disabled={disabled}
        required={required}
        placeholder={placeholder}
        min={min}
        max={max}
        className={`${baseInputClasses} ${stateClasses} ${disabledClasses} ${className}`}
      />

      {error && (
        <p className="mt-1 text-sm text-red-600 dark:text-red-400">{error}</p>
      )}

      {hint && !error && (
        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{hint}</p>
      )}
    </div>
  );
};

export default FormCurrencyInput;