import React, { useState } from "react";

export default function ShoutcastPanel() {
  const [serverUrl, setServerUrl] = useState("");
  const [status, setStatus] = useState(null);

  const checkStatus = async () => {
    try {
      const res = await fetch(serverUrl);
      const data = await res.text();
      setStatus(data);
    } catch (err) {
      setStatus("Fout bij verbinden met server");
    }
  };

  return (
    <div className="p-6 max-w-xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">Shoutcast Control Panel</h1>

      <input
        type="text"
        placeholder="http://your-server:8000"
        value={serverUrl}
        onChange={(e) => setServerUrl(e.target.value)}
        className="w-full p-2 border rounded mb-4"
      />

      <button
        onClick={checkStatus}
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        Check Status
      </button>

      {status && (
        <pre className="mt-4 p-3 bg-gray-100 rounded text-sm overflow-auto">
          {status}
        </pre>
      )}
    </div>
  );
}