<script>
export default {
  name: "Todo",
  data () {
    return {
      todo: this.todoprop,
    }
  },
  methods: {
    toggleTodoDone() {
      this.$emit("toggledone-index", this.todoindex)
    },
    removeTodo() {
      this.$emit("remove-todo", this.todoindex);
    }
  },
  props: ["todoprop", "todoindex"]
};
</script>

<template>
  <div class="flex items-center">
    <h1 @click="toggleTodoDone" class="cursor-pointer w-2/3 py-2 px-2" :class="{'bg-green-600': this.todo.done, 'bg-red-600': !this.todo.done}">{{ todo.todo }}</h1>
    <button @click="removeTodo" class="bg-black py-2 w-1/3 h-full">Delete Todo</button>
  </div>
</template>