'use client'
import { useEffect, useState } from 'react'
import { supabase } from '@/lib/supabase'

export default function TestPage() {
  const [status, setStatus] = useState('Checking connection...')

  useEffect(() => {
    async function checkConnection() {
      try {
        const { data, error } = await supabase.auth.getSession()
        if (error) {
          setStatus('Error connecting to Supabase: ' + error.message)
        } else {
          setStatus('Success! Connected to Supabase. Session data available.')
        }
      } catch (err: any) {
        setStatus('Unexpected error: ' + err.message)
      }
    }
    checkConnection()
  }, [])

  return (
    <div className="p-10 font-sans">
      <h1 className="text-2xl font-bold mb-4">Supabase Connection Test</h1>
      <div className={`p-4 rounded border ${status.includes('Success') ? 'bg-green-100 border-green-500 text-green-700' : 'bg-red-100 border-red-500 text-red-700'}`}>
        {status}
      </div>
      <p className="mt-4 text-gray-600">
        If you see a success message, the Supabase client is correctly initialized with the provided URL and Anon Key.
      </p>
    </div>
  )
}