<template>
    <div id="recipe-instructions">
        <h2 class="mb-4 fw-bolder">Instructions</h2>
        <div class="steps">
            <div v-for="(instruction, index) in instructions" :key="index" class="m-2 row">
                <div class="border border-2 rounded-circle border-primary text-center pt-1 d-inline-block col-2"
                    style="width: 40px; height: 40px;">
                    {{ index + 1 }}>
                </div>
                <p class="col pt-1">{{ instruction }}</p>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    props: {
        instructions: {
            type: Array,
            required: true,
        },
    },
};
</script>
  