<template>
  <div>
    <slot></slot>
    <div class="ui-gap-y-sm flex column q-pa-sm">
      <task-list-item v-for="task in tasks" :key="task.id" :task="task" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Task } from '@/widgets/tasks/types/Task'
import TaskListItem from '@/widgets/tasks/components/tasks/TaskListItem.vue'
import CategoryHeader from '@/widgets/tasks/components/common/CategoryHeader.vue'

@Component({
  components: { CategoryHeader, TaskListItem },
})
export default class TaskList extends Vue {
  @Prop({ type: Array, required: true })
  tasks!: Task
}
</script>
