---
const {
  data,
  titleSize = 'fs-4',
  childrenSize,
  textColor,
  textWeight,
  ellipsis,
  btnDisplay,
  textUnderline,
  position,
} = Astro.props
---

<!-- 文本 -->
<div class=`${position}`>
  <p class=`${titleSize} ${textWeight} mb-0 pt-5`>{data?.title}</p>
  <!-- <p class="fs-4">打造全球首个“岛式”精益智造工厂</p> -->
  {textUnderline && <div class="text-underline" />}

  <p class=`text-secondary ${childrenSize} ${ellipsis} pt-1`>{data?.content}</p>
  {btnDisplay && <a class="fs-5 a-link">了解更多</a>}
</div>

<style>
  .text-underline {
    width: 100px;
    border-bottom: 2px solid red;
    margin-left: 50px;
    margin-bottom: 1em;
  }
  .line-ellipsis-small {
    display: -webkit-box;
    height: 5em;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .line-ellipsis-large {
    display: -webkit-box;
    height: 20.8em;
    -webkit-line-clamp: 14;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .positionMiddle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .positionBottom {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .a-link {
    padding: 12px 28px;
    border: 2px solid red;
    border-radius: 25px;
    text-decoration: none;
    color: red;
    cursor: pointer;
  }
  /* .a-link:hover {
    color: white;
    background-color: red;
  } */
</style>
