component

import React from 'react';
import Spinner from '../../Spinner';

type CustomInputFileProps = { inputFileRef: any; isUpload: boolean; form: any; onChange: any; fileName: string; name?: string };

const CustomInputFile2 = ({ inputFileRef, isUpload, form, onChange, fileName, name }: CustomInputFileProps) => {
    return (
        <div className="flex items-center rounded-md border border-gray-300 shadow-sm w-full">
            <input ref={inputFileRef} id={fileName} name={name} type="file" className="custom-file-input hidden" onChange={onChange} />
            <label
                className="cursor-pointer rounded-l-md bg-[#F5F5F5] px-4 py-2 font-normal text-[#787A7D] hover:bg-[#F5F5F5]"
                style={{
                    margin: '0',
                }}
                onClick={() => !isUpload && inputFileRef.current.click()}
            >
                Choose File
            </label>
            {isUpload ? (
                <div className="px-4">
                    <Spinner />
                </div>
            ) : (
                <label
                    htmlFor={fileName}
                    className="w-[60%] cursor-pointer px-4 text-gray-600"
                    style={{
                        margin: '0',
                    }}
                >
                    {form[fileName]?.length !== 0 ? (typeof form[fileName] === 'string' ? form[fileName].replace(/uploads\/\d+-/, '') : 'No file selected') : 'No file selected'}
                </label>
            )}
        </div>
    );
};

export default CustomInputFile2;