// src/components/Ocean.tsx
import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { Water, WaterOptions } from 'three/examples/jsm/objects/Water.js';

const Ocean: React.FC = () => {

    const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
    const waterOption:WaterOptions = {
        textureWidth: 512,
        textureHeight: 512,
        waterNormals: new THREE.TextureLoader().load('https://threejs.org/examples/textures/waternormals.jpg', function (texture) {
            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        }),
        alpha: 0.9,
        sunDirection: new THREE.Vector3(),
        sunColor: 0xffffff,
        waterColor: '#001e0f',
        distortionScale: 3.7,
        fog: true,
        

    };
    const water = new Water(waterGeometry, waterOption);
    water.rotation.x = -Math.PI / 2;
    water.position.y = -1;


    const waterRef = useRef<THREE.Mesh>(null);
    useEffect(() => {
        if (waterRef.current) {
            waterRef.current.add(water);
        }
    }, [waterRef]);
    

    useEffect(() => {
        const animate = () => {
            requestAnimationFrame(animate);
            water.material.uniforms['time'].value += 0.1 / 60.0;
        };
        animate();
    }, []);

    return (
        <mesh ref={waterRef}>
            <meshStandardMaterial />
        </mesh>
    );
};

export default Ocean;