'use client'

import { Music } from 'lucide-react'

interface AudioPreviewProps {
  src: string
  fileName?: string
}

/**
 * Audio preview using native HTML5 audio element.
 * Supports mp3, wav, ogg, aac, m4a via the workspace raw API.
 */
export function AudioPreview({ src, fileName }: AudioPreviewProps) {
  return (
    <div className="flex flex-col h-full bg-surface-2">
      <div className="flex items-center justify-between px-3 py-1.5 border-b border-subtle bg-surface shrink-0">
        <span className="text-[11px] text-muted">Audio</span>
        {fileName && (
          <span className="text-[11px] text-tertiary truncate max-w-[200px]">{fileName}</span>
        )}
      </div>
      <div className="flex-1 flex flex-col items-center justify-center gap-6 p-8">
        <div className="w-20 h-20 rounded-full bg-surface-active flex items-center justify-center">
          <Music size={32} className="text-indigo" />
        </div>
        <audio
          controls
          className="w-full max-w-md"
          src={src}
          preload="metadata"
        >
          Your browser does not support the audio tag.
        </audio>
        {fileName && (
          <span className="text-[13px] text-muted">{fileName}</span>
        )}
      </div>
    </div>
  )
}