"use client";
import * as React from "react";
import { cn } from "@/lib/utils"; // Ahora sí existe

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
}

export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, label, error, type, ...props }, ref) => {
    return (
      <div className="w-full flex flex-col gap-2">
        {label && (
          <label className="text-[13px] font-extrabold text-navy uppercase tracking-widest">
            {label}
          </label>
        )}
        <input
          type={type}
          ref={ref}
          className={cn(
            // Clases base: Flat Premium
            "w-full bg-ice/10 border rounded-[12px] px-4 py-3.5 text-[15px] font-medium text-navy transition-all duration-200",
            "placeholder:text-navy/30 focus:bg-white focus:border-ocean",
            // MATAMOS LA LÍNEA AZUL AQUÍ:
            "outline-none ring-0 focus:ring-0 focus:ring-offset-0 ring-offset-transparent",
            error ? "border-red-500" : "border-crisp",
            className
          )}
          {...props}
        />
        {error && <span className="text-red-500 text-xs font-bold">{error}</span>}
      </div>
    );
  }
);
Input.displayName = "Input";