<template>
  <div class="flex items-center space-x-2">
    <Checkbox
      :checked="showTaskStatus"
      @update:checked="$emit('update:showTaskStatus', $event)"
      id="task-status-toggle"
    />
    <Label for="task-status-toggle" class="text-sm font-medium">
      Show Task Status
    </Label>
  </div>
</template>

<script setup lang="ts">
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

interface Props {
  showTaskStatus: boolean;
}

interface Emits {
  (e: "update:showTaskStatus", value: boolean): void;
}

defineProps<Props>();
defineEmits<Emits>();
</script>