import React from 'react'
import { Text } from '@react-three/drei'
import Computer from './models/Computer'

type ArtworkProps = {
  position: number[]
  rotation: number[]
  model: JSX.Element | null
  obraData: IObraData
}

const Artwork: React.FC<ArtworkProps & JSX.IntrinsicElements['group']> = ({
  position,
  rotation,
  model,
  obraData,
  ...rest
}) => {
  if (!obraData) return null
  return (
    <group rotation={rotation}>
      <group position={position} {...rest}>
        <Text
          position={[0, 8.2, 1.5]}
          color="white"
          fontSize={0.7}
          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
          anchorX="center"
          anchorY="middle"
        >
          {obraData.obra_titulo}
        </Text>
        <Computer
          obraId={obraData.id}
          position={[-5.5, 0, -2.8]}
          scale={[1.1, 1.1, 1.1]}
          rotation={[0, Math.PI, 0]}
        />
        <group position={[0, 0, -11.95]} rotation={[0, -Math.PI / 2, 0]}>
          {model ?? null}
        </group>
      </group>
    </group>
  )
}

export default Artwork
