import React, { useState } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, PerspectiveCamera } from '@react-three/drei';
import './App.css';

function InteractiveObject() {
  const [selected, setSelected] = useState(false);

  return (
    <mesh
      onClick={() => setSelected(!selected)}
      scale={selected ? 1.2 : 1}
      rotation={[0, 0, 0]}
    >
      <torusKnotGeometry args={[1, 0.4, 100, 16]} />
      <meshStandardMaterial
        color={selected ? "#3498db" : "#ccc"}
        emissive={selected ? "#1e3799" : "#000"}
        emissiveIntensity={selected ? 0.5 : 0}
        roughness={0.5}
      />
    </mesh>
  );
}

export default function App() {
  return (
    <div className="app-container">
      <div id="overlay">
        <h1>Interaction Pattern — Click on the object</h1>
      </div>

      <div className="canvas-wrapper">
        <Canvas dpr={[1, 2]}>
          <color attach="background" args={["white"]} />
          <PerspectiveCamera makeDefault position={[0, 0, 5]} />
          
          <ambientLight intensity={0.6 * Math.PI} />
          <pointLight position={[5, 5, 5]} intensity={1.0 * Math.PI} />

          <InteractiveObject />

          <OrbitControls makeDefault enableDamping dampingFactor={0.05} />
        </Canvas>
      </div>
    </div>
  );
}