---
// Properties
const {
    DidYouMean,
    ActualQuery
} = Astro.props
---

<div class="search-correction">
    <p>Did you mean "<a href="#">{DidYouMean}</a>"?</p>
    <p>Search for "<a href="#">{ActualQuery}</a>" instead.</p>
</div>

<style lang="scss">
.search-correction {
    border: 2px #ddd solid;
    padding: 6px 24px;
    font-size: 14px;
    margin-bottom: 6px;
    p {
        margin: 0px;
    }
}
</style>
