export default function TextArea({ image, onChange, id, label, className, placeholder=null }) {
    return (
        <div className={"flex flex-col h-full" + " " + className}>
            <label className="pr-3 pb-0.5">{ label }</label>
            <div class="flex items-center justify-center w-full h-full">
                <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-full border border-gray-300 rounded-lg cursor-pointer">
                    <div class="w-full h-full flex flex-col items-center justify-center p-6">
                            { image ? image : (
                                <div className="flex justify-center items-center bg-gray-200 rounded-lg w-full h-52">
                                    <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
                                    </svg>
                                </div>
                            )}
                        <span className="pt-4">برای آپلود عکس کلیک کنید</span>
                    </div>
                    <input onChange={ onChange } id="dropzone-file" type="file" class="hidden" />
                </label>
            </div>
        </div>
    );
}