'use client'

import { useEffect, useState } from 'react'
import CommunityMatchList from '../components/CommunityMatchList'
import Card from '../components/Card'

type Match = {
  id: string
  title: string
  matchDate: string
  teamA: { id: string; name: string; logo?: string | null }
  teamB: { id: string; name: string; logo?: string | null }
}

export default function MatchesPage() {
  const [, setMatches] = useState<Match[]>([])

  useEffect(() => {
    fetch('/api/schedule')
      .then(r => r.json())
      .then(data => setMatches(Array.isArray(data.matches) ? data.matches : []))
      .catch(err => {
        console.error('[MatchesPage] /api/schedule fehlt oder Antwort fehlerhaft:', err)
        setMatches([])
      })
  }, [])

  return (
    <Card maxWidth='auto'>
      <CommunityMatchList matchType="community" />
    </Card>
  )
}