import React from 'react';
import styled, { keyframes } from 'styled-components';

const spin = keyframes`
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
`;

const LoadingContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #0A1433 0%, #1a2863 50%, #0A1433 100%);
  color: #FFFFFF;
`;

const Spinner = styled.div`
  width: 3vw;
  height: 3vw;
  border: 0.2vw solid rgba(255, 255, 255, 0.2);
  border-top: 0.2vw solid #FFFFFF;
  border-radius: 50%;
  animation: ${spin} 1s linear infinite;
  margin-bottom: 1vw;
`;

const LoadingText = styled.div`
  font-size: 1.2vw;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
`;

interface LoadingSpinnerProps {
  text?: string;
}

const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({ text = '正在加载...' }) => {
  return (
    <LoadingContainer>
      <Spinner />
      <LoadingText>{text}</LoadingText>
    </LoadingContainer>
  );
};

export default LoadingSpinner;