<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 * as THREE from 'three';

	let bgColor = $derived($mode === 'dark' ? $themeColors.background : $themeColors.background);
</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={$themeColors.primary}
		/>

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

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

<style>
	.scene-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		pointer-events: none;
	}

	.scene-container :global(canvas) {
		display: block;
	}
</style>
