"use client";

import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
import { cn } from "@/lib/cn";

interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
  label?: string;
  error?: string;
  prefix?: ReactNode;
  hint?: string;
}

const Input = forwardRef<HTMLInputElement, Props>(function Input(
  { label, error, prefix, hint, className, ...rest },
  ref,
) {
  return (
    <label className="flex flex-col gap-1.5">
      {label ? (
        <span className="text-sm font-medium text-ink-soft">{label}</span>
      ) : null}
      <div
        className={cn(
          "flex items-center gap-2 px-3 h-11 rounded-xl bg-surface border transition-colors",
          error ? "border-bad" : "border-line focus-within:border-brand",
        )}
      >
        {prefix ? <span className="text-faint">{prefix}</span> : null}
        <input
          ref={ref}
          className={cn(
            "flex-1 bg-transparent outline-none text-ink placeholder:text-faint",
            className,
          )}
          {...rest}
        />
      </div>
      {error ? (
        <span className="text-xs text-bad font-medium">{error}</span>
      ) : hint ? (
        <span className="text-xs text-faint">{hint}</span>
      ) : null}
    </label>
  );
});

export default Input;