/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import * as THREE from 'three'
import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei/useGLTF'
import { Text } from '@react-three/drei'

import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'

type GLTFResult = GLTF & {
  nodes: {
    Circle: THREE.Mesh
  }
  materials: {
    novello: THREE.MeshStandardMaterial
  }
}

const text = [
  '¿Cual es la diferencia entre género y sexo?',
  'Respetar las diferencias y la diversidad nos acerca',
  '¿que es la identidad de género?',
]

export default function Model(props: JSX.IntrinsicElements['group']) {
  const group = useRef<THREE.Group>()
  const { nodes, materials } = useGLTF('/model/obras/novello.glb') as GLTFResult
  return (
    <group ref={group} {...props} dispose={null} position={[0, 0.1, 0]}>
      <group rotation={[0, 0.3, 0]} position={[0, 1, 0]}>
        <Text
          position={[0, 0, 0.8]}
          color="white"
          fontSize={0.08}
          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
          anchorX="center"
          anchorY="middle"
        >
          {text[0]}
        </Text>
      </group>
      <group rotation={[0, 0.8, 0]} position={[0, 1.2, 0]}>
        <Text
          color="white"
          fontSize={0.09}
          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
          anchorX="center"
          anchorY="middle"
        >
          {text[1]}
        </Text>
      </group>
      <group rotation={[0, 2.4, 0]} position={[0, 0.8, 0]}>
        <Text
          color="white"
          fontSize={0.09}
          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
          anchorX="center"
          anchorY="middle"
        >
          {text[2]}
        </Text>
      </group>
      <mesh material={materials.novello} geometry={nodes.Circle.geometry} />
    </group>
  )
}

useGLTF.preload('/model/obras/novello.glb')
