import { useContext } from "react";
import type { ReactElement } from "react";
import { FilesUploaderItem } from "./FilesUploaderItem";
import { FilesUploaderCtx } from "../context/index";

/**
 * Компонент вывода списка загруженных файлов
 * @returns
 * */
export const FilesUploaderList = (): ReactElement => {

  const { getCN, filesMap } = useContext(FilesUploaderCtx);

  return (
    <ul className={getCN("list")}>
      {[ ...filesMap.values() ].map((file) => (
        <FilesUploaderItem
          key={`${file.name}_${file.size}_${"lastModified" in file ? file.lastModified : 0}`}
          file={file}
        />
      ))}
    </ul>
  );
};