import React, { useEffect, useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
const supabase = createClient(supabaseUrl, supabaseAnonKey);

export default function SupabaseTest() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      setError(null);
      // Passe den Tabellennamen ggf. an
      const { data, error } = await supabase.from('test').select('*').limit(10);
      if (error) setError(error.message);
      setData(data || []);
      setLoading(false);
    }
    fetchData();
  }, []);

  return (
    <div style={{ marginTop: 24, padding: 16, border: '1px solid #eee', borderRadius: 8 }}>
      <h2>Supabase Test</h2>
      <div style={{ fontSize: 14 }}>
        <strong>Supabase URL:</strong> {supabaseUrl}
      </div>
      {loading && <p>Lade Daten...</p>}
      {error && <p style={{ color: 'red' }}>Fehler: {error}</p>}
      <ul>
        {data && data.length > 0 ? data.map((row, idx) => (
          <li key={idx}>{JSON.stringify(row)}</li>
        )) : !loading && <li>Keine Daten gefunden.</li>}
      </ul>
    </div>
  );
}