// Example React Component for WooNooW Addon
// This is a standalone ES module that can be dynamically imported

import React from 'react';

export default function ExamplePage() {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    // Fetch data from REST API
    const api = window.WNW_API || {};
    fetch(`${api.root}example`, {
      headers: {
        'X-WP-Nonce': api.nonce,
      },
    })
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(err => {
        console.error('Failed to load example data:', err);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return React.createElement('div', { className: 'p-6' },
      React.createElement('div', { className: 'animate-pulse' },
        React.createElement('div', { className: 'h-4 bg-gray-200 rounded w-1/4 mb-4' }),
        React.createElement('div', { className: 'h-4 bg-gray-200 rounded w-1/2' })
      )
    );
  }

  return React.createElement('div', { className: 'space-y-6' },
    React.createElement('div', { className: 'rounded-lg border border-border p-6 bg-card' },
      React.createElement('h2', { className: 'text-xl font-semibold mb-2' }, 'Example Addon'),
      React.createElement('p', { className: 'text-sm opacity-70 mb-4' }, 
        data?.message || 'Welcome to the example addon!'
      ),
      data?.data?.items && React.createElement('div', { className: 'space-y-2' },
        React.createElement('h3', { className: 'font-medium mb-2' }, 'Items:'),
        data.data.items.map(item =>
          React.createElement('div', { 
            key: item.id,
            className: 'flex items-center justify-between p-3 border rounded-md'
          },
            React.createElement('span', null, item.name),
            React.createElement('span', { 
              className: item.status === 'active' 
                ? 'text-green-600 text-sm' 
                : 'text-gray-400 text-sm'
            }, item.status)
          )
        )
      )
    ),
    React.createElement('div', { className: 'rounded-lg border border-border p-6 bg-card' },
      React.createElement('h3', { className: 'font-medium mb-2' }, 'Integration Info'),
      React.createElement('ul', { className: 'text-sm space-y-1 opacity-70' },
        React.createElement('li', null, '✅ Addon registered successfully'),
        React.createElement('li', null, '✅ Route loaded dynamically'),
        React.createElement('li', null, '✅ REST API working'),
        React.createElement('li', null, '✅ Navigation injected')
      )
    )
  );
}