import { cn } from '@/lib/utils';
import * as React from 'react';

/*
 * `text-base` en móvil y `text-sm` de sm hacia arriba.
 *
 * Safari en iOS hace zoom automático al enfocar un campo cuya letra mide menos
 * de 16px. Antes eso se resolvía forzando `font-size: 16px` a todo input desde
 * globals.css, lo que rompía la escala tipográfica en computadora. Acá se
 * resuelve donde corresponde: el campo mide 16px en celular y 14px en desktop.
 */
const inputClasses =
    'flex h-11 w-full rounded-md border border-input bg-surface px-3 py-2 text-base text-foreground shadow-sm transition-colors duration-150 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-subtle-foreground focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 sm:text-sm';

export interface InputProps
    extends React.InputHTMLAttributes<HTMLInputElement> { }

const Input = React.forwardRef<HTMLInputElement, InputProps>(
    ({ className, type, ...props }, ref) => {
        return (
            <input
                type={type}
                className={cn(inputClasses, className)}
                ref={ref}
                {...props}
            />
        );
    }
);
Input.displayName = 'Input';

export { Input, inputClasses };