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

const materials = {
  black: { color: "black", roughness: 1, metalness: 0 },
  silver: { color: "#C0C0C0", roughness: 0.3, metalness: 1 },
  gold: { color: "#FFD700", roughness: 0.4, metalness: 1 },
};

function Scene({ variant }) {
  return (
    <>
      <color attach="background" args={["white"]} />
      
      <ambientLight intensity={0.6 * Math.PI} />
      <pointLight position={[5, 5, 5]} intensity={1.0 * Math.PI} />

      <mesh rotation={[0, 0, 0]}>
        <torusKnotGeometry args={[0.8, 0.3, 100, 16]} />
        <meshStandardMaterial {...materials[variant]}/>
      </mesh>

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

export default function App() {
  const [activeVariant, setActiveVariant] = useState('black');

  return (
    <div className="app-container">
      <div id="controls">
        {Object.keys(materials).map((variant) => (
          <button
            key={variant}
            className={activeVariant === variant ? 'active' : ''}
            onClick={() => setActiveVariant(variant)}
          >
            {variant.charAt(0).toUpperCase() + variant.slice(1)}
          </button>
        ))}
      </div>

      <div className="canvas-wrapper">
        <Canvas dpr={[1, 2]}>
          <PerspectiveCamera makeDefault position={[0, 0, 5]} />
          <Scene variant={activeVariant} />
        </Canvas>
      </div>
    </div>
  );
}