import { type FC } from "react";
import { DocumentUpload, VideoSquare } from "iconsax-react";
import { clx } from "@/helpers/utils";
import UploadProgressBar from "@/components/UploadProgressBar";

type VideoUploadZoneProps = {
    getRootProps: () => React.HTMLAttributes<HTMLDivElement>;
    getInputProps: () => React.InputHTMLAttributes<HTMLInputElement>;
    isLoading?: boolean;
    loadingLabel?: string;
    uploadProgress?: number;
};

const VideoUploadZone: FC<VideoUploadZoneProps> = ({
    getRootProps,
    getInputProps,
    isLoading = false,
    loadingLabel = "در حال آپلود...",
    uploadProgress,
}) => {
    if (isLoading && uploadProgress !== undefined) {
        return (
            <UploadProgressBar
                progress={uploadProgress}
                label={`${loadingLabel} ${uploadProgress}٪`}
            />
        );
    }

    return (
        <div
            {...getRootProps()}
            className={clx(
                "w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl transition-colors",
                isLoading
                    ? "pointer-events-none opacity-80"
                    : "cursor-pointer hover:bg-gray-50"
            )}
        >
            <input {...getInputProps()} />
            {isLoading ? (
                <>
                    <span className="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-black" />
                    <div className="text-description text-xs">{loadingLabel}</div>
                </>
            ) : (
                <>
                    <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;

