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

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

const AudioUploadZone: FC<AudioUploadZoneProps> = ({
    getRootProps,
    getInputProps,
    isLoading = false,
    loadingLabel = "در حال آپلود...",
}) => {
    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>
                </>
            ) : (
                <>
                    <Music size={32} color="#8C90A3" variant="Outline" />
                    <div className="text-description text-xs">
                        فایل صوتی مورد نظر را آپلود کنید
                    </div>
                    <div className="text-description text-[10px]">
                        mp3, wav, ogg, m4a, aac, flac
                    </div>
                    <div className="flex items-center gap-2">
                        <DocumentUpload size={16} color="black" />
                        <div className="text-xs">آپلود</div>
                    </div>
                </>
            )}
        </div>
    );
};

export default AudioUploadZone;
