<template>
  <article class="course-card">
    <h2>{{ title }}</h2>
    <p>{{ finished ? "已完成" : "学习中" }}</p>
    <button ref="actionButton" type="button" @click="handleToggle">
      切换状态
    </button>
  </article>
</template>

<script setup>
import { ref } from "vue";

// 任务：
// 1. 用 defineProps 定义 title 和 finished
// 2. 用 defineEmits 定义 toggle
// 3. 点击按钮时触发 toggle
// 4. 用 defineExpose 暴露 focusAction

const actionButton = ref(null);

function handleToggle() {
  // 在这里触发 emit
}

function focusAction() {
  actionButton.value?.focus();
}
</script>

<style scoped>
.course-card {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid #dbe4f1;
  background: #fbfcfe;
}
</style>
