---
// Properties
const {Type} = Astro.props

// Highlight Type
---

<div class="search-menu">
    <a id="search-type-item-web" href="#">Web</a>
    <a class="disabled-items" id="search-type-item-images" href="#">Images</a>
    <a class="disabled-items" id="search-type-item-videos" href="#">Videos</a>
    <a class="disabled-items" id="search-type-item-news" href="#">News</a>
    <a class="disabled-items" id="search-type-item-map" href="#">Map</a>
</div>

<style lang="scss">
.search-menu {
    a {
        color: black;
        text-decoration: none;
        background: rgba(255, 255, 255, 0.25);
        border-width: 2px;
        border-style: solid;
        border-color: transparent;
        border-radius: 6px;
        padding: 6px 12px;
        transition: 0.3s background, 0.2s border-color;
        &:hover {
            background: rgba(255, 255, 255, 0.75);
            border-color: #ddd;
            transition: 0.3s background, 0.2s border-color;
        }
    }
}
</style>

{ 
    ()=> {
      if (Type === "Web") {
        return <style>#search-type-item-web {background: white; border-color: #ddd;} </style>
      } else if (Type === "Images") {
        return <style>#search-type-item-images {background: white; border-color: #ddd;} </style>
      } else if (Type === "Videos") {
        return <style>#search-type-item-videos {background: white; border-color: #ddd;} </style>
      } else if (Type === "News") {
        return <style>#search-type-item-news {background: white; border-color: #ddd;} </style>
      } else if (Type === "Map") {
        return <style>#search-type-item-map {background: white; border-color: #ddd;} </style>
      }
    }
  }