import React from "react";
import PropTypes from "prop-types";

import { prettySize } from "../../utils";

export const PolochonMetadata = ({
  quality,
  container,
  videoCodec,
  audioCodec,
  size,
}) => {
  if (!quality || quality === "") {
    return null;
  }

  const s = size === 0 ? "" : prettySize(size);

  const metadata = [quality, s, container, videoCodec, audioCodec]
    .filter((m) => m && m !== "")
    .join(", ");

  return (
    <span className="text text-muted">
      <i className="fa fa-file-video-o mr-1" />
      {metadata}
    </span>
  );
};
PolochonMetadata.propTypes = {
  quality: PropTypes.string,
  container: PropTypes.string,
  videoCodec: PropTypes.string,
  audioCodec: PropTypes.string,
  releaseGroup: PropTypes.string,
  size: PropTypes.number,
};