---
const { json, lang, listOrData } = Astro.props
import Img from '@/components/children/Img.astro'
import Text from '@/components/children/Text.astro'
console.log('-----listOrData22----->', listOrData)
---

<!-- 左图右文 -->
<div class="container">
  <div class="row">
    {
      listOrData?.map((item, index) => (
        <div class="col-sm-12 col-md-12 my-5">
          <div class="card border-0">
            <div
              class="left-right-card"
              style={item?.id ? 'cursor: pointer' : ''}
              data-post={item?.id}
            >
              <div class="row g-0">
                <div class="col-md-6 col-sm-6">
                  <Img url={item?.url} ratio="3 / 2" />
                </div>
                <div class="col-md-6 col-sm-6">
                  <div class="card-body pt-0 px-5">
                    <Text
                      data={item?.children}
                      btnDisplay={true}
                      ellipsis="line-ellipsis-large"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      ))
    }
  </div>
</div>
<style></style>
<script>
  const path = window.location.pathname
  var lang = path.substring(1, 3)

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