import { useEffect, useState } from 'react'; const backendUrl = import.meta.env.PROD ? '/api' : `http://${import.meta.env.VITE_BACKEND_TARGET}/api`; const Code = (props: JSX.IntrinsicElements['code']) => (


);

type SeenIP = {
  last_seen: string;
  ip: string;
  count: number;
};

export default function App() {
  const [seenIps, setSeenIps] = useState([]);
  const [error, setError] = useState(null);

  const refreshData = async () => {
    try {
      const response = await fetch(`${backendUrl}/ips`);
      if (!response.ok) {
        throw new Error(`Error: ${response.statusText}`);
      }
      const data = await response.json();

      setSeenIps(data.ips);
      setError(null); // Clear any previous errors
      console.log('Data fetched:', data);
    } catch (error) {
      console.error('Error fetching data:', error);
      setError(error.message);
    }
  };

  // Refresh data on component mount and every 30 seconds
  useEffect(() => {
    refreshData();

    const interval = setInterval(
      () => {
        refreshData();
      },
      (import.meta.env.DEV ? 3 : 30) * 1000,
    );

    return () => clearInterval(interval);
  }, []);

  return (
    
      
        LinkPulse

        {error && (
          
            {error}
          
        )}

        
          
              {seenIps.map((ip) => (
                
              ))}
            
            
                  
                    {ip.ip}
                  
                  
                    {ip.count} time{ip.count > 1 ? 's' : ''}
                  
                  {ip.last_seen}
                
          
        
      
    
  );
}