import dynamic from 'next/dynamic';
import React, { useState } from 'react';

interface AudioFile {
    id: string;
    file: File;
}


const Waveform = dynamic(() => import("@/components/Waveform"), {ssr: false});

const MultipleAudioUploader = () => {
    const [audioFiles, setAudioFiles] = useState<AudioFile[]>([]);

    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
        const files = Array.from(event.target.files || []);
        const newAudioFiles = files.map((file) => ({
            id: URL.createObjectURL(file),
            file,
        }));
        setAudioFiles((prev) => [...prev, ...newAudioFiles]);
    };

    return (
        <div>
            <input type="file" multiple accept="audio/*" onChange={handleFileUpload} />
            <div className="audio-list">
                {audioFiles.map((audio) => (
                    <div key={audio.id} className="audio-item">
                        <h3>{audio.file.name}</h3>
                        <Waveform
                            variant='edit'
                            audio={audio.id}
                            waveColor="#ddd"
                            progressColor="#4a90e2"
                        />
                    </div>
                ))}
            </div>
        </div>
    );
};

export default MultipleAudioUploader;
