import { cn } from '@/lib/utils';
import { forwardRef, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';

const base =
    'w-full rounded-lg border border-input bg-card/60 px-3 text-sm text-foreground placeholder:text-muted-foreground/70 transition outline-none focus:border-ring focus:ring-4 focus:ring-ring/15 disabled:opacity-60 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/15';

export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(({ className, ...p }, ref) => (
    <input ref={ref} className={cn(base, 'h-10', className)} {...p} />
));
Input.displayName = 'Input';

export const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>(({ className, ...p }, ref) => (
    <textarea ref={ref} className={cn(base, 'min-h-24 resize-y py-2.5', className)} {...p} />
));
Textarea.displayName = 'Textarea';

export function Field({ label, error, hint, htmlFor, children, className }: { label?: string; error?: string; hint?: ReactNode; htmlFor?: string; children: ReactNode; className?: string }) {
    return (
        <div className={cn('space-y-1.5', className)}>
            {label && (
                <label htmlFor={htmlFor} className="text-[13px] font-medium text-foreground/90">
                    {label}
                </label>
            )}
            {children}
            {error ? <p role="alert" className="text-xs text-destructive">{error}</p> : hint ? <p className="text-xs text-muted-foreground">{hint}</p> : null}
        </div>
    );
}