import { FaUpload, FaDownload } from 'react-icons/fa';
import styles from './DashboardPromptSet.module.css';
import { FileItem } from './FileItem';

type File = {
    id: number;
    file_name: string;
    created_at: string;
};

type FileListProps = {
    uploadedFiles: File[];
    downloadFiles: File[];
    downloadingFiles: Set<number>;
    onFileClick: (fileId: number, fileName: string) => void;
};

export const FileList = ({
    uploadedFiles,
    downloadFiles,
    downloadingFiles,
    onFileClick
}: FileListProps) => {
    return (
        <div className={styles.filesContainer}>
            <div className={styles.filesColumn}>
                <h3><FaUpload /> Uploaded Files</h3>
                <div className={styles.filesList}>
                    {uploadedFiles.map(file => (
                        <FileItem
                            key={file.id}
                            id={file.id}
                            fileName={file.file_name}
                            createdAt={file.created_at}
                            isDownloading={downloadingFiles.has(file.id)}
                            onFileClick={onFileClick}
                        />
                    ))}
                    {uploadedFiles.length === 0 && (
                        <p className={styles.noFiles}>No uploaded files</p>
                    )}
                </div>
            </div>
            <div className={styles.filesColumn}>
                <h3><FaDownload /> Files for Download</h3>
                <div className={styles.filesList}>
                    {downloadFiles.map(file => (
                        <FileItem
                            key={file.id}
                            id={file.id}
                            fileName={file.file_name}
                            createdAt={file.created_at}
                            isDownloading={downloadingFiles.has(file.id)}
                            onFileClick={onFileClick}
                        />
                    ))}
                    {downloadFiles.length === 0 && (
                        <p className={styles.noFiles}>No files for download</p>
                    )}
                </div>
            </div>
        </div>
    );
};