import React, { useState } from "react";
import { Canvas } from "@react-three/fiber";
import CameraController from "./components/CameraController";
import Sun from "./components/Sun";
import Earth from "./components/Earth";
import UI from "./components/UI";
import "./App.css";

export default function App() {
  const [G, setG] = useState(1.0);
  const [resetKey, setResetKey] = useState(0);

  const handleReset = () => {
    setG(1.0);
    setResetKey((k) => k + 1);
  };

  return (
    <>
      <UI G={G} setG={setG} handleReset={handleReset} />
      <Canvas
        camera={{ fov: 50 }}
        style={{ background: "#0b0d17", height: "100vh", width: "100vw" }}
      >
        <ambientLight intensity={1.3} />
        <pointLight
          position={[0, 0, 0]}
          intensity={1.8}
          decay={1}
          distance={0}
          color="#ffaa33"
        />
        <CameraController />
        <Sun />
        <Earth G={G} resetTrigger={resetKey} />
      </Canvas>
    </>
  );
}