import { useState, ChangeEvent } from "react";

const LogoUpload: React.FC = () => {
    const [logoImg, setLogoImg] = useState<File | null>(null);

    const logoImgHandler = (e: ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length > 0) {
            setLogoImg(e.target.files[0]);
        }
    };

    return (
        <>
            <div className="uploading-outer">
                <div className="uploadButton">
                    <input
                        className="uploadButton-input"
                        type="file"
                        name="logo"
                        accept="image/*"
                        id="upload"
                        required
                        onChange={logoImgHandler}
                    />
                    <label
                        className="uploadButton-button ripple-effect"
                        htmlFor="upload"
                    >
                        {logoImg ? logoImg.name : "Upload Photo"}
                    </label>
                    <span className="uploadButton-file-name"></span>
                </div>
                <div className="text">
                    Max file size is 2MB, Minimum dimension: 330x300 And
                    Suitable files are .jpg & .png
                </div>
            </div>
        </>
    );
};

export default LogoUpload;