'use client';

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

const sizeMap = {
  small: '24px',
  medium: '48px',
  large: '64px',
} as const;

export function LoadingSpinner({
  size = 'medium',
  inline = false,
}: { size?: 'small' | 'medium' | 'large'; inline?: boolean }) {
  const [mounted, setMounted] = useState(false);
  const [componentsLoaded, setComponentsLoaded] = useState(false);

  useEffect(() => {
    setMounted(true);
    loadComponent('circular-progress').then(() => {
      setComponentsLoaded(true);
    });
  }, []);

  if (!mounted || !componentsLoaded) {
    if (inline) {
      return (
        <span
          className="material-symbols-outlined"
          style={{ fontSize: sizeMap[size], animation: 'lk-spin 1s linear infinite' }}
        >
          progress_activity
        </span>
      );
    }
    return <div>Загрузка...</div>;
  }

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        ...(inline ? { padding: 0, width: sizeMap[size], height: sizeMap[size] } : { padding: '20px' }),
      }}
    >
      <md-circular-progress
        indeterminate
        style={{
          width: sizeMap[size],
          height: sizeMap[size],
        }}
      />
    </div>
  );
}