import { defineComponent, ref, onMounted, onUnmounted } from "vue";

const props = {
  background: {
    type: String,
    default: "var(--el-color-primary)"
  },
  width: {
    type: String,
    default: "10px"
  },
  height: {
    type: String,
    default: "10px"
  },
  borderRadius: {
    type: String,
    default: "50%"
  },
  duration: {
    type: Number,
    default: 1000
  }
};

export const useRenderFlicker = (options?: Partial<typeof props>) => {
  const config = { ...props, ...options };
  return defineComponent({
    name: "ReFlicker",
    setup() {
      return () => (
        <span
          class="flicker"
          style={{
            background: config.background,
            width: config.width,
            height: config.height,
            borderRadius: config.borderRadius
          }}
        />
      );
    }
  });
};

export default useRenderFlicker;
