'use client';

import React, { forwardRef, useId } from 'react';

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

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, error, icon, className = '', id, ...props }, ref) => {
    const genId = useId();
    const inputId = id ?? genId;

    return (
      <div className="w-full">
        {label && (
          <label
            htmlFor={inputId}
            className="block text-sm font-medium text-text-secondary mb-1"
          >
            {label}
          </label>
        )}

        <div className="relative">
          {icon && (
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center text-text-muted pointer-events-none">
              {icon}
            </div>
          )}

          <input
            ref={ref}
            id={inputId}
            className={`
              w-full rounded-[var(--radius-md)] border
              ${error ? 'border-red-500' : 'border-border'}
              bg-background-secondary/90 text-text-primary

              ${icon ? 'pl-10' : 'pl-4'} pr-4 py-2

              placeholder:text-text-muted

              focus:outline-none focus:ring-2 focus:ring-primary/35 focus:border-border-strong

              disabled:opacity-50 disabled:cursor-not-allowed

              transition-all duration-200 shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]

              ${className}
            `}
            {...props}
          />
        </div>

        {error && (
          <p className="mt-1 text-sm text-red-500">
            {error}
          </p>
        )}
      </div>
    );
  }
);

Input.displayName = 'Input';