import { defineComponent } from "vue"
import { Vue3Lottie } from "vue3-lottie";
import styles from "./index.module.less"
import state from "/src/state"
import fly from "./imgs/fly.json"
import stilln from "./imgs/stilln.json"
import note from "./imgs/note.json"

export default defineComponent({
    name: "Bird",
    setup() {
        return () => <>
                <Vue3Lottie style={ { display : state.playState === "paused" ? "" : "none" } } key={1} class={styles.brid} animationData={stilln} autoPlay={true} loop={true}></Vue3Lottie>
                <>
                    <Vue3Lottie style={ { display : state.playState === "paused" ? "none" : "" } } key={2} class={styles.brid} animationData={fly} autoPlay={true} loop={true}></Vue3Lottie>
                    <Vue3Lottie style={ { display : state.playState === "paused" ? "none" : "" } } key={2} class={styles.note} animationData={note} autoPlay={true} loop={true}></Vue3Lottie>
                </>
        </>
    }
})
