import { getImageUrl } from '../../utils/cdn'
import { transformContainerId } from './utils'

export const Cube = () => {
  const faceBase =
    'absolute inset-0 [transform-style:preserve-3d] [backface-visibility:visible] bg-cover'

  return (
    <div className="relative mx-auto size-16 [perspective:800px]">
      <div
        id={transformContainerId}
        className="absolute inset-0 [transform-style:preserve-3d] [transform:rotateX(-15deg)_rotateY(45deg)]"
      >
        {/* prettier-ignore */}
        <div className="absolute inset-0 animate-cube-rotate-in [transform-style:preserve-3d]">
          <div
            className={`${faceBase} [transform:translateY(-50%)_rotateX(90deg)]`}
            style={{
              backgroundImage: `url('${getImageUrl('/404/404-cube-top.svg')}')`,
            }}
          />

          <div
            className={`${faceBase} [transform:translateX(50%)_rotateY(90deg)]`}
            style={{
              backgroundImage: `url('${getImageUrl('/404/404-cube-left.svg')}')`,
            }}
          />
          <div
            className={`${faceBase} [transform:translateY(50%)_rotateX(-90deg)]`}
            style={{
              backgroundImage: `url('${getImageUrl('/404/404-cube-top.svg')}')`,
            }}
          />

          <div
            className={`${faceBase} [transform:translateX(-50%)_rotateY(-90deg)]`}
            style={{
              backgroundImage: `url('${getImageUrl('/404/404-cube-left.svg')}')`,
            }}
          />
          <div
            className={`${faceBase} [transform:translateZ(-32px)_rotateY(180deg)]`}
            style={{
              backgroundImage: `url('${getImageUrl('/404/404-cube-right.svg')}')`,
            }}
          />
          <div
            className={`${faceBase} [transform:translateZ(32px)]`}
            style={{
              backgroundImage: `url('${getImageUrl('/404/404-cube-right.svg')}')`,
            }}
          />
        </div>
      </div>
    </div>
  )
}