---
/**
 * Practice — end-of-chapter problem with difficulty marker per CS:APP
 * (v4.3.0, closes #71).
 *
 * Difficulty 1-4 rendered as ◆ count (filled diamonds out of 4). No
 * inline solutions; instructor-manual style — separate from Exercise
 * which has solutions at chapter end.
 *
 * Anchor id (`#practice-{id}`) for cross-references.
 *
 * Family: book-genre (cross-profile).
 */
import { assertEnumProp } from '../src/lib/assert-prop';

const PRACTICE_DIFFICULTIES = ['1', '2', '3', '4'] as const;
type Difficulty = (typeof PRACTICE_DIFFICULTIES)[number];
interface Props {
  id: string;
  difficulty: Difficulty;
}
const { id } = Astro.props;
// #109 sweep: coerce (tolerates difficulty={3} numeric usage), then fail loud
// on anything outside 1-4 instead of rendering empty / NaN diamond markers.
const difficulty = assertEnumProp(String(Astro.props.difficulty), PRACTICE_DIFFICULTIES, {
  component: 'Practice',
  prop: 'difficulty',
});
const anchorId = `practice-${id}`;
const filled = Number.parseInt(difficulty, 10);
const markers = '◆'.repeat(filled) + '◇'.repeat(4 - filled);
---
<aside class="practice" id={anchorId} role="note">
  <div class="practice-header">
    <strong class="practice-label">Practice</strong>
    <span class="practice-difficulty" aria-label={`Difficulty ${difficulty} of 4`}>{markers}</span>
  </div>
  <div class="practice-body"><slot /></div>
</aside>