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

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

export const Input = forwardRef<HTMLInputElement, Props>(
  ({ label, error, className, ...props }, ref) => (
    <div>
      {label && <label className="block text-[11px] font-semibold text-slate-600 mb-1.5">{label}</label>}
      <input
        ref={ref}
        className={cn(
          "w-full px-3.5 py-2.5 text-sm border rounded-lg bg-white transition-all duration-150",
          "border-slate-300 focus:border-slate-500 focus:ring-2 focus:ring-slate-500/20 focus:outline-none",
          "placeholder:text-slate-400",
          error && "border-red-400 focus:border-red-500 focus:ring-red-500/20",
          className,
        )}
        {...props}
      />
      {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
    </div>
  ),
);
Input.displayName = "Input";
