import InputError from '@/Components/InputError';
import { Label } from '@/Components/ui/label';
import { capitalize } from '@/lib/utils';
import React from 'react';

export default function FormInput({
    error,
    label,
    id,
    children,
    className,
}: {
    label: string;
    id: string;
    error?: string;
    className?: string;
    children: React.ReactElement;
}) {
    const input = React.cloneElement(children, {
        id,
        name: id,
    } as Partial<unknown> & React.Attributes);

    return (
        <div className={`${className}`}>
            <Label htmlFor={id} className="text-neutral">
                {capitalize(label)}
            </Label>
            <div className="relative border-0 text-black">{input}</div>
            <InputError message={error} className="mt-2 text-right" />
        </div>
    );
}