<script setup lang="ts">
import { ref } from 'vue'
import AssignTasksDialog from './AssignTasksDialog.vue'

const props = defineProps<{ childId: string | number | null }>()
const showDialog = ref(false)
const openDialog = () => {
  showDialog.value = true
}
const closeDialog = () => {
  showDialog.value = false
}
</script>

<template>
  <div>
    <button class="assign-tasks-btn" @click="openDialog">Assign Task</button>
    <AssignTasksDialog v-if="showDialog" :child-id="props.childId" @close="closeDialog" />
  </div>
</template>

<style scoped>
.assign-tasks-btn {
  background: #667eea;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.4rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 2rem;
  transition: background 0.18s;
}
.assign-tasks-btn:hover {
  background: #5a67d8;
}
</style>
