'use client'

import { cn } from '@/lib/utils'
import { DownloadSimple, FileAudio, FilePdf } from '@phosphor-icons/react'

/**
 * PDF Component - Embed PDF files with preview
 */
interface PDFProps {
  src: string
  title?: string
  height?: number
  className?: string
}

export function PDF({ src, title, height = 500, className }: PDFProps) {
  return (
    <div className={cn('my-4', className)}>
      {title && (
        <div className="flex items-center gap-2 mb-2">
          <FilePdf className="h-5 w-5 text-red-500" weight="fill" />
          <span className="text-sm font-medium">{title}</span>
        </div>
      )}
      <div 
        className="rounded-lg border border-border overflow-hidden bg-muted"
        style={{ height }}
      >
        <iframe
          src={`${src}#view=FitH`}
          className="w-full h-full"
          title={title || 'PDF Document'}
        />
      </div>
    </div>
  )
}

/**
 * Audio Component - Embed audio files with player
 */
interface AudioProps {
  src: string
  title?: string
  autoplay?: boolean
  loop?: boolean
  className?: string
}

export function Audio({ src, title, autoplay = false, loop = false, className }: AudioProps) {
  return (
    <div className={cn('my-4', className)}>
      {title && (
        <div className="flex items-center gap-2 mb-2">
          <FileAudio className="h-5 w-5 text-primary" weight="fill" />
          <span className="text-sm font-medium">{title}</span>
        </div>
      )}
      <div className="rounded-lg border border-border bg-muted p-4">
        <audio
          src={src}
          controls
          autoPlay={autoplay}
          loop={loop}
          className="w-full"
        >
          Your browser does not support the audio element.
        </audio>
      </div>
    </div>
  )
}

/**
 * Download Component - Download button for files
 */
interface DownloadProps {
  src: string
  label?: string
  icon?: string
  filename?: string
  className?: string
}

export function Download({ src, label, filename, className }: DownloadProps) {
  const displayLabel = label || 'Download File'
  const downloadName = filename || src.split('/').pop() || 'download'

  return (
    <a
      href={src}
      download={downloadName}
      className={cn(
        'inline-flex items-center gap-2 px-4 py-2 rounded-lg',
        'bg-primary text-primary-foreground hover:bg-primary/90',
        'text-sm font-medium transition-colors',
        'no-underline',
        className
      )}
    >
      <DownloadSimple className="h-4 w-4" weight="bold" />
      {displayLabel}
    </a>
  )
}
