import { Avatar, ListItem, ListItemAvatar, ListItemText } from "@mui/material";
import { DiskImage } from "../api/DiskImageApi";
import { mdiHarddisk } from "@mdi/js";
import { filesize } from "filesize";
import Icon from "@mdi/react";

export function FileDiskImageWidget(p: {
  image: DiskImage;
}): React.ReactElement {
  return (
    <ListItem>
      <ListItemAvatar>
        <Avatar>
          <Icon path={mdiHarddisk} />
        </Avatar>
      </ListItemAvatar>
      <ListItemText
        primary={p.image.file_name}
        secondary={`${p.image.format} - ${filesize(p.image.file_size)}`}
      />
    </ListItem>
  );
}