"use client";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";
import { TextField as TextFieldTypos } from "@/types";

export const TextField = ({
    label,
    className,
    placeHolder,
    type = "text",
    required = false,

    value,
    registerFor,
    register,
    errors,
    errorMessage,

    tooltip,
    textarea,

    ...props
}: TextFieldTypos) => {
    const hasError = errors?.[registerFor];
    return (
        <div className="space-y-1 w-full">
            <div className="inline-flex gap-2">
                <Label htmlFor={(registerFor as string) || label}>{required && '*'} {label}</Label>
                {(hasError || errorMessage) && (
                    <span className="text-xs text-destructive max-w-72 truncate text-nowrap"
                        title={hasError?.message || errorMessage}
                    >
                        {hasError?.message || errorMessage}
                    </span>
                )}
            </div>
            <div className={cn("max-md:min-w-60 2xl:min-w-80 max-w-3xl w-full relative", className)}>
                {
                    textarea ?
                        <Textarea
                            id={registerFor || label}
                            defaultValue={value}
                            cols={1}
                            className={cn('h-16 max-h-24', className)}
                            {...(register ? register(registerFor, {
                                required: required ? `${label} is required` : false,
                            }) : {})}
                            placeholder={placeHolder}
                            aria-invalid={!!hasError}

                            {...props as any}
                        />
                        :
                        <Input
                            id={registerFor || label}
                            type={type}
                            step={type === "number" ? '0.001' : undefined}
                            defaultValue={value}
                            autoComplete={type === "password" ? 'new-password' : 'off'}
                            {...(register ? register(registerFor, {
                                required: required ? `${label} is required` : false,
                            }) : {})}
                            className="w-full"
                            placeholder={placeHolder}
                            aria-invalid={!!hasError}
                            required={required}

                            {...props as any}
                        />
                }
            </div>
        </div>
    );
};