import React from "react"
import { File } from "../generated/graphql"
import sizeToReadable from "../functions/sizeToReadable"
import dateFormat from "../functions/dateFomat"
import { FaRegFileAlt } from "react-icons/fa"
import Renameable from "./Renameable"

interface Props {
    file: File,
	edit: boolean
	onRename?: (newName: string)=>void
	onCancleRename?: ()=>void
}

const FileElement: React.FC<Props> = (props) => {
	return (
		<>
			<td>
				<FaRegFileAlt className="inline" />
				<Renameable
					text={props.file.name || ""}
					edit={props.edit}
					onCancleRename={props.onCancleRename}
					onRename={props.onRename} 
				/>
			</td>
			<td>
				{dateFormat(props.file.lastModified)}
			</td>
			<td>
				{sizeToReadable(props.file.size)}
			</td>

		</>
	)
}

export default FileElement