import { defineComponent, type PropType } from 'vue';
import Spin, { type SpinProps } from 'ant-design-vue/es/spin';
import 'ant-design-vue/es/spin/style';

const Loading = defineComponent({
  props: {
    loading: {
      type: [Boolean, Object] as PropType<boolean | SpinProps>,
      default: false
    }
  },
  setup(props) {
    return () => {
      const { loading } = props;

      let spinProps: SpinProps | undefined;
      if (typeof loading === 'boolean') {
        spinProps = {
          spinning: loading
        };
      } else if (typeof loading === 'object') {
        spinProps = {
          spinning: true,
          ...(loading as any)
        };
      }
      return (
        <div
          class="table-layout__loading"
          style={{ display: spinProps?.spinning ? 'block' : 'none' }}
        >
          <Spin spinning={false} {...spinProps}>
            <span></span>
          </Spin>
        </div>
      );
    };
  }
});

export { Loading };
