---
import type { Layout } from '@libs/layout'

interface Props {
  layout: Layout
}

const { layout } = Astro.props
---

<button
  class=`btn ${layout === 'examples' ? 'btn-bd-primary' : 'btn-link nav-link px-0 px-lg-2'} py-2 dropdown-toggle d-flex align-items-center`
  id="bd-theme"
  type="button"
  aria-expanded="false"
  data-bs-toggle="dropdown"
  {...layout !== 'examples' ? { 'data-bs-display': 'static' } : {}}
  aria-label="Toggle theme (auto)"
>
  <svg class="bi my-1 theme-icon-active" aria-hidden="true"><use href="#circle-half"></use></svg>
  <span class=`${layout === 'examples' ? 'visually-hidden' : 'd-lg-none ms-2'}` id="bd-theme-text">Toggle theme</span>
</button>
<ul class=`dropdown-menu dropdown-menu-end${layout === 'examples' ? ' shadow' : ''}` aria-labelledby="bd-theme-text">
  <li>
    <button
      type="button"
      class="dropdown-item d-flex align-items-center"
      data-bs-theme-value="light"
      aria-pressed="false"
    >
      <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#sun-fill"></use></svg>
      Light
      <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
    </button>
  </li>
  <li>
    <button
      type="button"
      class="dropdown-item d-flex align-items-center"
      data-bs-theme-value="dark"
      aria-pressed="false"
    >
      <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
      Dark
      <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
    </button>
  </li>
  <li>
    <button
      type="button"
      class="dropdown-item d-flex align-items-center active"
      data-bs-theme-value="auto"
      aria-pressed="true"
    >
      <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#circle-half"></use></svg>
      Auto
      <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
    </button>
  </li>
</ul>