import React from 'react';
import type { MessageBlock } from '@/store/commStore';

interface AudioBlockProps {
  block: MessageBlock;
}

function formatDuration(seconds: number | undefined): string | null {
  if (typeof seconds !== 'number' || seconds <= 0) return null;
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins}:${secs.toString().padStart(2, '0')}`;
}

const AudioBlock: React.FC<AudioBlockProps> = ({ block }) => {
  const { url, duration } = block.block_data;

  if (!url) {
    return null;
  }

  const durationLabel = formatDuration(duration);

  return (
    <div className="space-y-1">
      <audio
        src={url}
        controls
        className="w-full rounded-lg"
        preload="metadata"
      />
      {durationLabel && (
        <p className="text-xs text-secondary-500">
          Dauer: {durationLabel}
        </p>
      )}
    </div>
  );
};

export default AudioBlock;
