---
const { json, lang, list, componentTitle } = Astro.props
import Img from '@/components/children/Img.astro'
import Text from '@/components/children/Text.astro'
---

<!-- 左中右图文 -->
<div class="container">
  <div class="fs-1 text-center mt-5">{componentTitle}</div>
  <div class="row row-cols-md-3 row-cols-sm-1">
    {
      list?.map((item, index) => (
        <div class="col-md-4 col-sm-12 my-5" id={item.id}>
          <div
            class="title-img"
            style={item.id ? 'cursor: pointer' : ''}
            data-post={item.id}
          >
            <div class="card border-0">
              <div class="card-body">
                <div style="height:auto;overflow:hidden">
                  <Img
                    url={item?.url}
                    ratio="3 / 2"
                    transformEnlarge="transformEnlarge"
                  />
                </div>
                <Text
                  list={item?.children}
                  btnDisplay={true}
                  ellipsis="line-ellipsis-small"
                />
              </div>
            </div>
          </div>
        </div>
      ))
    }
  </div>
</div>
<style></style>

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

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