type RadioControlsProps = {
  status: string;
  isPlaying: boolean;
  onPlay: () => void | Promise<void>;
  onStop: () => void;
};

export function RadioControls({ status, isPlaying, onPlay, onStop }: RadioControlsProps) {
  return (
    <section className="radio-controls" aria-label="Radio playback controls">
      <p className="radio-controls__status" aria-live="polite">
        {status}
      </p>
      <div className="radio-controls__buttons">
        <button
          type="button"
          className="playpause"
          onClick={() => void onPlay()}
          disabled={isPlaying}
          aria-label="Start live stream"
        >
          ▶️
        </button>
        <button
          type="button"
          className="playpause"
          onClick={onStop}
          disabled={!isPlaying}
          aria-label="Stop live stream"
        >
          ⏹️
        </button>
      </div>
    </section>
  );
}