<script lang="ts">
	import { Canvas } from '@threlte/core';
	import { T } from '@threlte/core';
	import ParticleField from './ParticleField.svelte';
	import { themeColors, mode } from '$lib/stores/theme';
	import '$lib/assets/css/background-3d.css';

	// Reactive theme colors
	const bgColor = $derived($themeColors.background);
	const primaryColor = $derived($themeColors.primary);
</script>

<div class="scene-container">
	<Canvas>
		<T.PerspectiveCamera
			makeDefault
			position={[0, 0, 8]}
			fov={75}
			near={0.1}
			far={1000}
		/>

		<!-- Ambient light -->
		<T.AmbientLight intensity={0.3} />

		<!-- Directional light with theme color -->
		<T.DirectionalLight
			position={[5, 5, 5]}
			intensity={0.5}
			color={primaryColor}
		/>

		<!-- Particle system -->
		<ParticleField particleCount={600} />

		<!-- Background color -->
		<T.Color args={[bgColor]} attach="background" />
	</Canvas>
</div>
