import React from "react";
import shortUUID from "short-uuid";
import { secondsToMMSS } from "../../../general/common/utils/time";
import PlayButton from "../../../general/components/elements/PlayButtons";
import { CALL_TYPE } from "../../common/constants";

const PlayLogButton = ({ rowData, demoModeClassName = "" }) => {
  const { call_type } = rowData;
  return (
    <div className={`align-v-start gap-5 translate-y-4 ${demoModeClassName}`}>
      {(!rowData.recording_url || CALL_TYPE.MISSED === call_type) && (
        <span>{secondsToMMSS(rowData.talk_time) || 0}</span>
      )}

      {rowData.recording_url && CALL_TYPE.MISSED != call_type && (
        <PlayButton
          data={{ ...rowData, index: 0 }}
          id={shortUUID.generate()}
          className={"input__actions__icon icon--medium-xl"}
          downlaodButtonclassName="input__actions__icon icon--icon-medium-w "
        />
      )}
    </div>
  );
};

export default PlayLogButton;