import { defineComponent, ref, reactive } from "vue";
import { any } from "vue-types";

export default defineComponent({
  props: {
    src: any<string | undefined>().isRequired,
  },

  emits: ["click"],
  setup(props, { emit }) {
    const imgRef = ref();
    const state = reactive({
      error: false,
    });
    return () => (
      <img
        ref={imgRef}
        src={props.src}
        class={[state.error ? "image_error" : null]}
        onMousedown={(e) => e.preventDefault()}
        onError={() => (state.error = true)}
        onClick={() => emit("click")}
      />
    );
  },
});
