import React from 'react';
import { twMerge } from 'tailwind-merge';

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

export const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, label, error, ...props }, ref) => {
    return (
        <div className="flex flex-col gap-1 w-full">
            {label && <label className="text-[10px] font-bold text-primary dark:text-primary-light uppercase tracking-[0.15em] ml-1 mb-1">{label}</label>}
            <input
                ref={ref}
                className={twMerge(
                    'flex h-12 w-full rounded-xl border px-4 py-2 text-sm transition-all font-medium shadow-inner outline-none',
                    'bg-[var(--input-bg)] border-[var(--input-border)] text-[var(--input-text)] placeholder:text-[var(--input-placeholder)]',
                    'focus:ring-2 focus:ring-primary/20 focus:border-primary',
                    'disabled:cursor-not-allowed disabled:opacity-50',
                    error && 'border-error focus:ring-error/10 focus:border-error',
                    className
                )}
                {...props}
            />
            {error && <span className="text-sm text-error">{error}</span>}
        </div>
    );
});
