---
const domId = `carousel-${Math.random().toString(36).substring(2, 7)}`
const { list, Children, componentTitle } = Astro.props
---

<!-- 轮播 -->
<div class="container">
  <div id={domId} class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      {
        list?.map((item, index) => (
          <div
            class={index == 0 ? 'carousel-item active' : 'carousel-item'}
            id={index}
          >
            <div class="row">
              {item.map((it, index) => (
                <div class="col-md-12 col-sm-12 px-5">
                  <div
                    class="top-bottom-project-card-carousel"
                    style={it.id ? 'cursor: pointer' : ''}
                    data-post={it.id}
                  >
                    <div class="card border-0" />
                    <Children list={it} componentTitle={componentTitle} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))
      }
    </div>
    <button
      class="carousel-control-prev"
      type="button"
      data-bs-target={`#${domId}`}
      data-bs-slide="prev"
    >
      <span
        class="carousel-control-prev-icon"
        style="background-color: #696969;"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button
      class="carousel-control-next"
      type="button"
      data-bs-target={`#${domId}`}
      data-bs-slide="next"
    >
      <span
        class="carousel-control-next-icon"
        style="background-color: #696969;"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>
<!-- <LeftImgRightText list={it} /> -->
<style></style>

<script>
  const path = window.location.pathname
  var lang = path.substring(1, 3)

  const items = document.querySelectorAll(`.top-bottom-project-card-carousel`)
  items.forEach((item) => {
    item.addEventListener('click', () => {
      window.location.href = `${window.location.origin}/${lang}/detail?id=${item.dataset.post}`
    })
  })
</script>
