import { InfoDropdown } from "@heydovetail/ui-components";
import React from "react";
import { Attachment } from "../../util/attrs";

export function AttachmentInfoDropdown(props: { attachment: Attachment }) {
  const { name, type, naturalSize } = props.attachment;

  const info: Array<{ label: string; value: string }> = [];

  if (name !== undefined) {
    info.push({ label: "Filename", value: name });
  }

  if (type !== undefined) {
    info.push({ label: "Type", value: type });
  }

  if (naturalSize !== undefined) {
    info.push({ label: "Dimensions", value: `${naturalSize.width}×${naturalSize.height}` });
  }

  return <InfoDropdown info={info} />;
}