import Link from 'next/link'
import { useTrainingsQuery } from '../../../src/gql'

const TrainingsList = () => {
  const { data, error, loading } = useTrainingsQuery()

  if (error) return <p>Error loading trainings...</p>
  if (loading) return <p>Loading data...</p>
  return (
    <ul>
      {data?.trainings.map(training => (
        <li key={training.id}>
          <Link href='training/[id]' as={`training/${training.id}`}>
            <a>{training.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default TrainingsList