"use client";
import React from 'react';

interface AudioPlayerProps {
  word: string;
  audioUs?: string | null;
  audioUk?: string | null;
}

export function AudioPlayer({ word, audioUs, audioUk }: AudioPlayerProps) {
  const playAudio = (type: 'us' | 'uk') => {
    const proxyUrl = `/api/audio?word=${encodeURIComponent(word)}&type=${type}`;
    const audio = new Audio(proxyUrl);
    audio.play().catch(err => console.error("Error playing audio", err));
  };

  return (
    <div className="flex gap-4">
      {audioUs && (
        <button 
          onClick={() => playAudio('us')}
          className="flex items-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-700 px-6 py-3 rounded-full transition-colors font-bold text-sm shadow-sm"
        >
          <span className="text-xl">🇺🇸</span> US
        </button>
      )}
      {audioUk && (
        <button 
          onClick={() => playAudio('uk')}
          className="flex items-center gap-2 bg-gray-50 hover:bg-gray-100 text-gray-700 px-6 py-3 rounded-full transition-colors font-bold text-sm border border-gray-200"
        >
          <span className="text-xl">🇬🇧</span> UK
        </button>
      )}
    </div>
  );
}