import React from 'react';
import { 
  Flex, 
  Spinner, 
  Text, 
  VStack 
} from '@chakra-ui/react';

const LoadingSpinner = ({ 
  message = 'Loading...', 
  size = 'lg', 
  color = 'brand.500',
  showMessage = true 
}) => {
  return (
    <Flex 
      justify="center" 
      align="center" 
      className="min-h-32 w-full"
    >
      <VStack spacing={4}>
        <Spinner 
          size={size} 
          color={color}
          thickness="4px"
          speed="0.65s"
          emptyColor="gray.200"
        />
        {showMessage && (
          <Text 
            color="gray.600" 
            fontSize="sm"
            className="animate-pulse"
          >
            {message}
          </Text>
        )}
      </VStack>
    </Flex>
  );
};

export default LoadingSpinner;