React.js

import React, { useState, useEffect } from 'react';

// For Vite projects, use import.meta.env
const JKT_API_KEY = process.env.REACT_APP_JKT48_API_KEY;

export default function LiveStreamingWidget() {
  const [streams, setStreams] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    // Defines the async function
    const fetchLive = async () => {
      try {
        setLoading(true);
        const response = await fetch(
          `https://v2.jkt48connect.com/api/jkt48/live?apikey=${JKT_API_KEY}`
        );

        if (!response.ok) {
            throw new Error(`HTTP Check Failed with status ${response.status}`);
        }

        const data = await response.json();
        setStreams(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchLive();
  }, []); // Empty dependency array ensures it runs once on mount.

  // Render Loading States reliably
  if (loading) return <div>Checking live statuses...</div>;
  if (error) return <div className="error-text">Connection Error: {error}</div>;

  return (
    <div className="live-container mt-4">
      <h3>🔴 Members Currently Streaming</h3>
      {streams.length === 0 ? (
        <p>No streams available right now. Check back later!</p>
      ) : (
        <div className="stream-grid">
          {streams.map((user, idx) => (
             <div key={idx} className="card p-2">
                 <img src={user.img} alt={user.name} width="100%" />
                 <h4>{user.name}</h4>
                 <p className="badge">Platform: {user.type}</p>
             </div>
          ))}
        </div>
      )}
    </div>
  );
}