import React from "react";
import { SpinLoading } from "antd-mobile";
import styles from "./layout.module.scss";

interface LayoutProps {
  loading?: boolean;
  children?: React.ReactNode;
  header?: React.ReactNode;
  footer?: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({
  children,
  header,
  footer,
  loading = false,
}) => {
  return (
    <div className={styles.container}>
      {header && <header>{header}</header>}
      <main>
        {loading ? (
          <div className={styles.loadingContainer}>
            <SpinLoading color="primary" style={{ fontSize: 32 }} />
            <div className={styles.loadingText}>加载中...</div>
          </div>
        ) : (
          children
        )}
      </main>
      {footer && <footer>{footer}</footer>}
    </div>
  );
};

export default Layout;