import type { InputHTMLAttributes, ReactNode } from "react";
import { forwardRef } from "react";

interface Props extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  icon?: ReactNode;
  error?: string;
}

const Input = forwardRef<HTMLInputElement, Props>(function Input(
  { label, icon, error, className = "", id, ...rest },
  ref,
) {
  const inputId = id ?? rest.name;
  return (
    <label className="block" htmlFor={inputId}>
      {label && (
        <span className="mb-1.5 flex items-center gap-2 text-sm font-medium text-brand-text/90">
          {icon}
          {label}
        </span>
      )}
      <input
        {...rest}
        ref={ref}
        id={inputId}
        className={[
          "w-full rounded-xl px-3.5 py-2.5",
          "bg-brand-bgLight/40 border border-brand-lines/25 text-brand-text",
          "placeholder:text-brand-text/40",
          "focus:outline-none focus:border-brand-accent focus:ring-2 focus:ring-brand-accent/30",
          "disabled:opacity-60 disabled:cursor-not-allowed",
          error ? "border-red-500/60" : "",
          className,
        ].join(" ")}
      />
      {error && <span className="mt-1 block text-xs text-red-400">{error}</span>}
    </label>
  );
});

export default Input;
