"use client";

import { useCallback } from "react";
import * as THREE from "three";

import {
  ThreeCanvas,
  type ThreeSceneFactory,
} from "../../../shared/webgl";

export function OrbitalKnot() {
  const createScene = useCallback<ThreeSceneFactory>(({ scene }) => {
    const ambient = new THREE.AmbientLight(0xffffff, 0.35);
    const key = new THREE.DirectionalLight(0xffffff, 1.1);
    key.position.set(3, 4, 5);
    const rim = new THREE.DirectionalLight(0x88aaff, 0.45);
    rim.position.set(-4, -1, -2);

    const geometry = new THREE.TorusKnotGeometry(0.85, 0.28, 128, 16);
    const material = new THREE.MeshStandardMaterial({