import React from "react";
import { FileItem } from "./useFileList";
import { Link } from "react-router-dom";
import { Button } from "antd";

import { FolderFilled, FileFilled } from "@ant-design/icons";
import { useDownload } from "./useDownload";

export function FileListItem({ item }: { item: FileItem }) {
  const download = useDownload();
  return item.is_folder ? (
    <Link
      className="ant-btn ant-btn-link ant-btn-sm"
      to={`/folder/${item.id}`}
      style={{ padding: 0, color: "#001529" }}
    >
      <FolderFilled /> <span>{item.name}</span>
    </Link>
  ) : (
    <Button
      type="link"
      size="small"
      onClick={() => download(item.id)}
      style={{ padding: 0, color: "#001529" }}
    >
      <FileFilled /> {item.name}
    </Button>
  );
}