text: import { useMutation } from '@redwoodjs/web'
  import { Link, routes, navigate } from '@redwoodjs/router'
  
  const DELETE_EXERCISE_MUTATION = gql`
    mutation DeleteExerciseMutation($id: Int!) {
      deleteExercise(id: $id) {
        id
      }
    }
  `
  
  const Exercise = ({ exercise }) => {
    const [deleteExercise] = useMutation(DELETE_EXERCISE_MUTATION, {
      onCompleted: () => {
        navigate(routes.exercises())
        location.reload()
      },
    })
  
    const onDeleteClick = (id) => {
      if (confirm('Are you sure you want to delete exercise ' + id + '?')) {
        deleteExercise({ variables: { id } })
      }
    }
  
    return (
      <>
        <div className="bg-white border rounded-lg overflow-hidden">
          <header className="bg-gray-300 text-gray-700 py-3 px-4">
            <h2 className="text-sm font-semibold">Exercise {exercise.id} Detail</h2>
          </header>
          <table className="w-full text-sm">
            <tbody>
              <tr className="odd:bg-gray-100 even:bg-white border-t">
                <td className="font-semibold p-3 text-right md:w-1/5">id</td>
                <td className="p-3">{exercise.id}</td>
              </tr><tr className="odd:bg-gray-100 even:bg-white border-t">
                <td className="font-semibold p-3 text-right md:w-1/5">name</td>
                <td className="p-3">{exercise.name}</td>
              </tr><tr className="odd:bg-gray-100 even:bg-white border-t">
                <td className="font-semibold p-3 text-right md:w-1/5">description</td>
                <td className="p-3">{exercise.description}</td>
              </tr><tr className="odd:bg-gray-100 even:bg-white border-t">
                <td className="font-semibold p-3 text-right md:w-1/5">category</td>
                <td className="p-3">{exercise.category}</td>
              </tr><tr className="odd:bg-gray-100 even:bg-white border-t">
                <td className="font-semibold p-3 text-right md:w-1/5">image</td>
                <td className="p-3">{exercise.image}</td>
              </tr><tr className="odd:bg-gray-100 even:bg-white border-t">
                <td className="font-semibold p-3 text-right md:w-1/5">videoLink</td>
                <td className="p-3">{exercise.videoLink}</td>
              </tr><tr className="odd:bg-gray-100 even:bg-white border-t">
                <td className="font-semibold p-3 text-right md:w-1/5">createdAt</td>
                <td className="p-3">{exercise.createdAt}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <nav className="my-4 mx-2 text-center">
          <ul>
            <li className="inline-block ml-2">
              <Link
                to={routes.editExercise({ id: exercise.id })}
                className="text-xs bg-blue-600 text-white hover:bg-blue-700 rounded px-4 py-2 uppercase font-semibold tracking-wide"
              >
                Edit
              </Link>
            </li>
            <li className="inline-block ml-2">
              <a
                href="#"
                className="text-xs bg-red-600 text-white hover:bg-red-700 rounded px-4 py-2 uppercase font-semibold tracking-wide"
                onClick={() => onDeleteClick(exercise.id)}
              >
                Delete
              </a>
            </li>
          </ul>
        </nav>
      </>
    )
  }
  
  export default Exercise
  