/**
 * components/ui/Input.tsx
 * Reusable input field — professional institutional style.
 */

"use client";

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

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  hint?: string;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
}

export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  { label, error, hint, leftIcon, rightIcon, className, id, ...props },
  ref
) {
  const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");

  return (
    <div className="flex flex-col gap-2">
      {label && (
        <label
          htmlFor={inputId}
          className="text-[9px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1"
        >
          {label}
        </label>
      )}
      <div className="relative">
        {leftIcon && (
          <span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-300">
            {leftIcon}
          </span>
        )}
        <input
          ref={ref}
          id={inputId}
          className={clsx(
            "w-full rounded-[1.25rem] bg-slate-50/50 border px-5 py-4 text-sm text-black font-medium font-sans",
            "placeholder:text-slate-300 placeholder:uppercase placeholder:text-[10px] placeholder:tracking-widest placeholder:font-black outline-none",
            "transition-all duration-300",
            "focus:bg-white focus:border-black focus:shadow-xl focus:shadow-black/[0.02]",
            error
              ? "border-red-200 bg-red-50/30 text-red-900"
              : "border-slate-100",
            leftIcon && "pl-12",
            rightIcon && "pr-12",
            className
          )}
          {...props}
        />
        {rightIcon && (
          <span className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-300">
            {rightIcon}
          </span>
        )}
      </div>
      {error && <p className="text-[10px] text-red-500 font-bold uppercase tracking-tight ml-1">{error}</p>}
      {hint && !error && <p className="text-[10px] text-slate-400 font-medium ml-1">{hint}</p>}
    </div>
  );
});