'use client';
import {forwardRef,useEffect,useImperativeHandle,useRef,useState} from 'react';
import {Globe2,Pause,Play} from 'lucide-react';
import {heroAnimationFrame,type HeroAnimationFrame} from '@/lib/hero-animation';
import type {HeroMapController} from '@/lib/hero-map/renderer.js';
type MotionProps={paused:boolean;reducedMotion:boolean;onTogglePause:()=>void};
export type HeroAssetMapHandle={render:(frame:HeroAnimationFrame)=>void};
export function HeroMotionButton({paused,reducedMotion,onTogglePause}:MotionProps){
const label=reducedMotion?'حرکت طبق تنظیمات کاهش حرکت متوقف است':paused?'ادامه انیمیشن هیرو':'توقف انیمیشن هیرو';
return ;
}
export const HeroAssetMap=forwardRef(function HeroAssetMap({paused,reducedMotion,onTogglePause},ref) {
const host=useRef(null);
const renderer=useRef(null);
const latestFrame=useRef(heroAnimationFrame(0));
const options=useRef({light:false,paused,reducedMotion});
const [failed,setFailed]=useState(false);
useImperativeHandle(ref,()=>({render(frame){latestFrame.current=frame;renderer.current?.render(frame)}}),[]);
useEffect(()=>{options.current={...options.current,paused,reducedMotion};renderer.current?.update(options.current)},[paused,reducedMotion]);
useEffect(()=>{
let disposed=false;
const root=host.current;
if(!root)return;
const updateTheme=()=>{
options.current.light=document.documentElement.dataset.theme==='light';
renderer.current?.update(options.current);
};
updateTheme();
const observer=new MutationObserver(updateTheme);
observer.observe(document.documentElement,{attributes:true,attributeFilter:['data-theme']});
import('@/lib/hero-map/renderer.js').then(module=>{
if(disposed)return;
renderer.current=module.createAssetMap(root,options.current);
renderer.current.render(latestFrame.current);
}).catch(()=>{if(!disposed)setFailed(true)});
return()=>{disposed=true;observer.disconnect();renderer.current?.dispose();renderer.current=null};
},[]);
return ;
});