import React, { ChangeEvent, FC } from 'react';

interface GeneratorFormInputProps {
    value: string;
    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
    placeholder?: string;
    type?: string;
    id?: string;
    name?: string;
    isError?: boolean;
    errorMessage?: string;
    label?: string;
    [key: string]: any;
}

const GeneratorFormInput: FC<GeneratorFormInputProps> = ({
    value,
    onChange,
    placeholder = "",
    type = "text",
    id,
    name,
    isError = false,
    errorMessage = "This field is required",
    label = "",
    ...restProps
}) => {
    const baseInputClass = "h-[42px] mt-4 py-3 px-4 block w-full rounded-md text-sm dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400";
    const errorInputClass = "border border-solid border-red-500 focus:border-red-500 focus:outline-none focus:ring-0";
    const defaultInputClass = "border border-gray-200 border-solid bg-gray-75 focus:outline-none focus-visible:border-primary-400 focus:ring-primary-400";
    // className="mt-4 py-2.5 px-4 w-full border border-solid bg-gray-75 rounded-md text-md focus:outline-none focus-visible:border-primary-400 focus:ring-primary-400 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400"

    return (
        <div>
            {label && <label htmlFor={id} className="block text-sm font-medium mb-2 dark:text-white">{label}</label>}
            <div className="relative">
                <input
                    value={value}
                    onChange={onChange}
                    type={type}
                    id={id}
                    name={name}
                    className={`${baseInputClass} ${isError ? errorInputClass : defaultInputClass}`}
                    placeholder={placeholder}
                    {...restProps}
                />
                {isError && 
                    <div className="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3">
                        <svg className="h-5 w-5 text-red-500" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                        </svg>
                    </div>
                }
            </div>
            {isError && errorMessage && <p className="text-sm text-red-500 mt-2" id={`${id}-helper`}>{errorMessage}</p>}
        </div>
    );
};

export default GeneratorFormInput;