---
// src/components/Badge.astro
interface Props {
  label: string;
  featured?: boolean;
}

const { label, featured = false } = Astro.props;
---

<span class="badge">
  {label}
  {featured && <strong> ★ Featured</strong>}
</span>

<!-- src/pages/index.astro -->
---
import Badge from '../components/Badge.astro';
---

<Badge label="New Course" featured={true} />
<Badge label="Older Course" />

<!--
  Notes:
  - featured?: boolean marks the prop optional in the Props
    interface; the default value (= false) is supplied when
    destructuring Astro.props, so omitting the prop entirely is safe.
  - {featured && <strong>...</strong>} only renders the badge markup
    when featured is true — the same short-circuit && pattern used
    in JSX, evaluated as real JavaScript inside the expression.
-->