import { Link, routes } from '@redwoodjs/router'

export const QUERY = gql`
  query FindKategories {
    kategories {
      id
      name
    }
  }
`

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

export const Empty = () => {
  return (
    <div className="rw-text-center">
      {'No kategories yet. '}
      <Link to={routes.newKategorie()} className="rw-link">
        {'Create one?'}
      </Link>
    </div>
  )
}

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

export const Success = ({ kategories }) => {
  return <Kategories kategories={kategories} />
}

const KategoriesSelect = ({ kategories, name }) => {

  return (
    <select  name="{truncate(kategorie.id)}" >
      {kategories.map((kategorie) => (
        <option value="{truncate(kategorie.id)}" >{truncate(kategorie.name)}</option>
        ))}
    </select>
  )
}

export default KategoriesSelect
