import React from 'react'
import { MediaItem } from '../api/jellyfin'
import { usePreviewContext } from '../context/PreviewContext/PreviewContext'
import './PreviewButton.css'

interface PreviewButtonProps {
    track: MediaItem
    size?: 'small' | 'medium'
    className?: string
}

export const PreviewButton: React.FC<PreviewButtonProps> = ({ 
    track, 
    size = 'small', 
    className = '' 
}) => {
    // Don't render anything if no preview URL available
    if (!track.SpotifyPreviewUrl) {
        return null
    }

    // Check if we're in a browser environment (SSR safety)
    if (typeof window === 'undefined') {
        return null
    }

    const { isPreviewPlaying, currentPreviewTrack, togglePreview } = usePreviewContext()
    
    const isCurrentTrackPlaying = isPreviewPlaying && currentPreviewTrack?.Id === track.Id
    
    const handleClick = (e: React.MouseEvent) => {
        e.preventDefault()
        e.stopPropagation() // Prevent triggering parent click handlers
        togglePreview(track)
    }
    
    return (
        <button
            className={`preview-button ${size} ${isCurrentTrackPlaying ? 'playing' : ''} ${className}`}
            onClick={handleClick}
            title={isCurrentTrackPlaying ? 'Stop preview' : 'Play 30s preview'}
            type="button"
        >
            {isCurrentTrackPlaying ? (
                // Pause icon
                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                </svg>
            ) : (
                // Play icon
                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M8 5v14l11-7z"/>
                </svg>
            )}
        </button>
    )
}