import type {
  FindNachhilfeangebots,
  FindNachhilfeangebotsVariables,
} from 'types/graphql'

import { Link, routes } from '@redwoodjs/router'
import type {
  CellSuccessProps,
  CellFailureProps,
  TypedDocumentNode,
} from '@redwoodjs/web'

import Nachhilfeangebots from 'src/components/Nachhilfeangebot/Nachhilfeangebots'

export const QUERY: TypedDocumentNode<
  FindNachhilfeangebots,
  FindNachhilfeangebotsVariables
> = gql`
  query FindNachhilfeangebots {
    nachhilfeangebots {
      id
      subject
      currentClass
      cost
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => {
  return (
    <div className="rw-text-center">
      Keine Nachhilfeangebote bis jetzt.{' '}
      <Link to={routes.newNachhilfeangebot()} className="rw-link">
        Ein neues erstellen?
      </Link>
    </div>
  )
}

export const Failure = ({ error }: CellFailureProps<FindNachhilfeangebots>) => (
  <div className="rw-cell-error">{error?.message}</div>
)

export const Success = ({
  nachhilfeangebots,
}: CellSuccessProps<FindNachhilfeangebots, FindNachhilfeangebotsVariables>) => {
  return <Nachhilfeangebots nachhilfeangebots={nachhilfeangebots} />
}