import React, { useRef, useEffect } from 'react';
import * as THREE from 'three';

export const ProteinViewer: React.FC = () => {
  const viewerRef = useRef<HTMLDivElement>(null); // Ref for the div container

  useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); // Adjust aspect ratio if needed
    const renderer = new THREE.WebGLRenderer({ antialias: true });

    renderer.setSize(100, 100); // Set a smaller size

    
    if (viewerRef.current) {
      viewerRef.current.appendChild(renderer.domElement);
    }

    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 1, 2);
    scene.add(light);

    camera.position.z = 10; 

    // Render loop
    const animate = () => {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();

    // Clean up on component unmount
    return () => {
      if (viewerRef.current) {
        viewerRef.current.removeChild(renderer.domElement);
      }
    };
  }, []);

  return (
    <div
      ref={viewerRef}
      style={{
        width: '100px',  // Smaller width
        height: '100px', // Smaller height
        margin: '0 auto', // Center it if you want
        border: '1px solid #ddd', // Optional: border around the viewer
      }}
    />
  );
};

export default ProteinViewer;