---
const {
  json,
  lang,
  listOrData,
  componentTitle,
  textAlign = 'text-center',
  line = '1',
} = 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" id={componentTitle}>{componentTitle}</div>
  {
    line == '1' && (
      <div class={`${textAlign}`}>
        <div class="text-underline" />
      </div>
    )
  }
  <div class="row row-cols-md-3 row-cols-sm-1">
    {
      listOrData?.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
                    listOrData={item}
                    ratio="3 / 2"
                    transformEnlarge="transformEnlarge"
                  />
                </div>
                <Text
                  listOrData={item?.children}
                  btnDisplay={true}
                  ellipsis="line-ellipsis-small"
                />
              </div>
            </div>
          </div>
        </div>
      ))
    }
  </div>
</div>
<style>
  .text-underline {
    display: inline-block;
    width: 100px;
    border-bottom: 2px solid red;
  }
</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>
