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

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

  return (
    <section>
      {error && <p>Error loading trainings...</p>}
      {loading && <p>Loading data...</p>}
      {data && data.trainings.length > 0 ? (
        <ul>
          {data?.trainings.map(training => (
            <li key={training.id}>
              <button type='button'>Delete</button>
              <Link href='training/[id]' as={`training/${training.id}`}>
                <a>{training.title}</a>
              </Link>
            </li>
          ))}
        </ul>
      ) : (
        <p>No trainings found.</p>
      )}
      <Link href='training/create'>
        <a>Create training</a>
      </Link>

      <style jsx>{`
        li {
          list-style: none;
        }
        ul {
          padding: 0;
        }
      `}</style>
    </section>
  )
}

export default TrainingsList