import { forwardRef } from "react";
import type { LucideIcon } from "lucide-react";
import styles from "./Input.module.css";

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  hint?: string;
  iconLeft?: React.ComponentType<{ className?: string; strokeWidth?: number; size?: number }>;
  iconRight?: React.ComponentType<{ className?: string; strokeWidth?: number; size?: number }>;
}

const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  { label, error, hint, iconLeft: IconLeft, iconRight: IconRight, required, className = "", ...props },
  ref,
) {
  const inputClass = [
    styles.input,
    error ? styles.hasError : "",
    IconLeft ? styles.withIconLeft : "",
    IconRight ? styles.withIconRight : "",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div className={styles.field}>
      {label && (
        <label className={styles.label}>
          {label}
          {required && <span className={styles.required}>*</span>}
        </label>
      )}
      <div className={styles.inputWrap}>
        {IconLeft && <IconLeft className={styles.iconLeft} strokeWidth={1.8} />}
        <input ref={ref} className={inputClass} required={required} {...props} />
        {IconRight && <IconRight className={styles.iconRight} strokeWidth={1.8} />}
      </div>
      {error && <span className={styles.error}>{error}</span>}
      {hint && !error && <span className={styles.hint}>{hint}</span>}
    </div>
  );
});

export default Input;