import type { ${operationName}, ${operationName}Variables  } from 'types/graphql'

import type {
  CellSuccessProps,
  CellFailureProps,
  TypedDocumentNode,
} from '@cedarjs/web'

export const QUERY: TypedDocumentNode<
  ${operationName},
  ${operationName}Variables
> = gql`
  query ${operationName} {
    ${camelName} {
      ${idName}
    }
  }
`

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

export const Empty = () => <div>Empty</div>

export const Failure = ({
  error,
}: CellFailureProps<${operationName}Variables>) => (
  <div style={{ color: 'red' }}>Error: {error?.message}</div>
)

export const Success = ({
  ${camelName},
}: CellSuccessProps<${operationName}, ${operationName}Variables>) => {
  return (
    <ul>
      {${camelName}.map((item) => {
        return <li key={item.${idName}}>{JSON.stringify(item)}</li>
      })}
    </ul>
  )
}