/**
 * Компонент для ленивой загрузки Material Web Components
 */

'use client';

import { useEffect, useState, ReactNode } from 'react';
import { loadComponent } from '@/lib/material-components';

interface LazyMaterialComponentProps {
  componentName: string;
  children: ReactNode;
  fallback?: ReactNode;
}

export function LazyMaterialComponent({
  componentName,
  children,
  fallback = null,
}: LazyMaterialComponentProps) {
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(false);

  useEffect(() => {
    let mounted = true;

    loadComponent(componentName)
      .then(() => {
        if (mounted) {
          setLoaded(true);
        }
      })
      .catch((err) => {
        console.error(`[LazyMaterial] Error loading ${componentName}:`, err);
        if (mounted) {
          setError(true);
        }
      });

    return () => {
      mounted = false;
    };
  }, [componentName]);

  if (error) {
    return <>{fallback}</>;
  }

  if (!loaded) {
    return <>{fallback}</>;
  }

  return <>{children}</>;
}