import React from 'react'
import { Box, CircularProgress, Typography, Skeleton } from '@mui/material'

interface LoadingSpinnerProps {
  size?: number
  message?: string
  variant?: 'spinner' | 'skeleton'
}

export default function LoadingSpinner({
  size = 40,
  message = 'Loading...',
  variant = 'spinner',
}: LoadingSpinnerProps) {
  if (variant === 'skeleton') {
    return (
      <Box sx={{ p: 2 }}>
        <Skeleton variant="text" width="60%" height={32} sx={{ mb: 2 }} />
        <Skeleton
          variant="rectangular"
          width="100%"
          height={120}
          sx={{ mb: 1 }}
        />
        <Skeleton
          variant="rectangular"
          width="100%"
          height={120}
          sx={{ mb: 1 }}
        />
        <Skeleton variant="rectangular" width="100%" height={120} />
      </Box>
    )
  }

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        p: 4,
        gap: 2,
      }}
    >
      <CircularProgress size={size} thickness={4} />
      <Typography variant="body2" color="text.secondary">
        {message}
      </Typography>
    </Box>
  )
}