"use client";

import { useState } from "react";

export function RadioFrame() {
  const [error, setError] = useState(false);

  return (
    <div className="w-full h-[calc(100vh-8rem)]">
      {error ? (
        <div className="w-full h-full flex items-center justify-center bg-gray-100">
          <div className="text-center">
            <h2 className="text-xl font-semibold text-gray-800">Unable to load Radio</h2>
            <p className="text-gray-600 mt-2">Please check your connection or try again later</p>
            <button 
              onClick={() => setError(false)}
              className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
            >
              Retry
            </button>
          </div>
        </div>
      ) : (
        <iframe 
          src={process.env.NEXT_PUBLIC_IFRAME_RADIO_URL}
          className="w-full h-full border-none"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          onError={() => setError(true)}
        />
      )}
    </div>
  );
}