import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Spin } from 'antd';
import { useSoftStore } from '@/store/software';

interface TemplateContainerProps {
  children: React.ReactNode;
  navTheme: string;
  style?: React.CSSProperties;
}

const TemplateContainer: React.FC<TemplateContainerProps> = ({ children, navTheme, style }) => {

  const { topSpinning, topSpinTip } = useSoftStore();

  const backgroundImage =
    navTheme === 'realDark'
      ? 'linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
      : 'linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)';

  return (
    <Spin spinning={topSpinning} tip={topSpinTip}>
      <PageContainer>
        <Card
          style={{
            ...style,
            borderRadius: 8,
          }}
        >
          <div style={{ backgroundImage }}>
            {children}
          </div>
        </Card>
      </PageContainer>
    </Spin>
  );
};

export default TemplateContainer;