import * as React from 'react';
import {AudioFile, getMimeTypeDescription} from '@/utils/blob';
import {formatFileSize, formatNumeral, formatSecondsDurationPrecise} from '@/utils/numeral';
import {useAudioControls} from '@tesseract-design/web-blob-react';

export interface AudioMiniFilePreviewProps {
  file: AudioFile;
}

export const AudioMiniFilePreview: React.FC<AudioMiniFilePreviewProps> = ({
  file: f,
}) => {
  const {
    mountRef,
    playMedia,
    isPlaying,
  } = useAudioControls({ file: f });

  return (
    <div
      className="absolute top-0 left-0 w-full h-full cursor-pointer"
      ref={mountRef}
      onClick={playMedia}
    />
  );
};
