import { type FC } from "react";
import { DocumentUpload, VideoSquare } from "iconsax-react";

type VideoUploadZoneProps = {
    getRootProps: () => React.HTMLAttributes<HTMLDivElement>;
    getInputProps: () => React.InputHTMLAttributes<HTMLInputElement>;
};

const VideoUploadZone: FC<VideoUploadZoneProps> = ({ getRootProps, getInputProps }) => {
    return (
        <div
            {...getRootProps()}
            className="w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl cursor-pointer hover:bg-gray-50 transition-colors"
        >
            <input {...getInputProps()} />
            <VideoSquare
                size={32}
                color="#8C90A3"
                variant="Outline"
            />
            <div className="text-description text-xs">
                ویدیو مورد نظر را آپلود کنید
            </div>
            <div className="flex items-center gap-2">
                <DocumentUpload
                    size={16}
                    color="black"
                />
                <div className="text-xs">آپلود</div>
            </div>
        </div>
    );
};

export default VideoUploadZone;