"use client";

import { ExtendedMessage } from "@/atoms/im";
import React from "react";


const CallEndItem = ({
  message,
  customData,
}: {
  message: ExtendedMessage;
  customData: {
    duration: number;
  };
}) => {
  const { duration } = customData || {};

  // 毫秒转mm:ss, 如果是小时则为hh:mm
  const durationText = React.useCallback((duration: number) => {
    const hours = Math.floor(duration / 3600000);
    const minutes = Math.floor((duration % 3600000) / 60000);
    const seconds = Math.floor((duration % 60000) / 1000);
    
    if (hours > 0) {
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    } else if (minutes > 0) {
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    } else {
      return `00:${seconds.toString().padStart(2, '0')}`;
    }
  }, []);

  return (
    <div className="flex justify-center my-6">
      <div className="bg-surface-element-normal backdrop-blur-2xl rounded-xs px-2 py-1 flex items-center gap-2 txt-body-s">
        <div>{`Call duration ${durationText(duration)}`}</div>
        <i className="iconfont icon-hang-up" />
      </div>
    </div>
  );
}
 
export default CallEndItem;