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

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

export const SurrealInput = forwardRef<HTMLInputElement, SurrealInputProps>(
  ({ className, label, error, id, ...props }, ref) => {
    return (
      <div className="flex flex-col gap-2">
        {label && (
          <label htmlFor={id} className="text-sm font-medium text-foreground">
            {label}
          </label>
        )}
        <input
          ref={ref}
          id={id}
          className={cn(
            "w-full rounded-lg bg-input px-4 py-2.5 text-foreground placeholder:text-muted-foreground",
            "border border-border transition-all duration-200",
            "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
            "hover:border-primary/50",
            error && "border-destructive focus:ring-destructive",
            className,
          )}
          {...props}
        />
        {error && <span className="text-sm text-destructive">{error}</span>}
      </div>
    )
  },
)
SurrealInput.displayName = "SurrealInput"
