<template>
  <div class="doc-preview"> 
    <div class="doc-image">
      <div class="doc-frame"> 
        <div class="doc-seal">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <circle cx="8" cy="8" r="7" stroke="#999" stroke-width="0.8" fill="none"/>
            <circle cx="8" cy="8" r="4" stroke="#999" stroke-width="0.5" fill="none"/>
            <line x1="8" y1="1" x2="8" y2="3" stroke="#999" stroke-width="0.5"/>
            <line x1="8" y1="13" x2="8" y2="15" stroke="#999" stroke-width="0.5"/>
            <line x1="1" y1="8" x2="3" y2="8" stroke="#999" stroke-width="0.5"/>
            <line x1="13" y1="8" x2="15" y2="8" stroke="#999" stroke-width="0.5"/>
          </svg>
        </div> 
        <div class="doc-text">
          <div class="doc-line-italic">One Hundred Nineteenth Congress</div>
          <div class="doc-line-small">of the</div>
          <div class="doc-line-italic">United States of America</div>
          <div class="doc-body-lines">
            <div class="doc-body-line" style="width: 100%" />
            <div class="doc-body-line" style="width: 83%" />
            <div class="doc-body-line" style="width: 92%" />
            <div class="doc-body-line" style="width: 75%" />
            <div class="doc-body-line" style="width: 100%" />
            <div class="doc-body-line" style="width: 67%" />
          </div>
        </div>
      </div>
    </div> 
    <div class="doc-info">
      <div class="doc-number">{{ billNumber }}</div>
      <div class="doc-serial">{{ billSerial }}</div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  billNumber: { type: String, required: true },
  billSerial: { type: String, required: true },
})
</script>

<style scoped>
.doc-preview {
  width: 240px;
  height: 296px;
  position: relative;
}

.doc-image {
  width: 222px;
  height: 296px;
  position: absolute;
  left: 13px;
  top: 0;
}

.doc-frame {
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px 12px;
  overflow: hidden;
  box-sizing: border-box;
}

.doc-seal {
  position: absolute;
  top: 8px;
  left: 8px;
}

.doc-text {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 4px;
}

.doc-line-italic {
  font-size: 7px;
  color: rgba(95, 101, 108, 1);
  text-align: center;
  font-style: italic;
  line-height: 1.4;
}

.doc-line-small {
  font-size: 6px;
  color: rgba(95, 101, 108, 1);
  text-align: center;
  line-height: 1.4;
}

.doc-body-lines {
  margin-top: 10px;
  border-top: 1px solid #ebedf0;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.doc-body-line {
  height: 2.5px;
  background: #e0e0e0;
  border-radius: 1px;
  margin: 0 auto;
}

.doc-info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 240px;
  height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 4px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 40%);
  border-radius: 0 0 4px 4px;
}

.doc-number {
  font-size: 20px;
  font-weight: 700;
  color: rgba(59, 65, 75, 1);
  line-height: 36px;
  text-align: center;
}

.doc-serial {
  font-size: 16px;
  font-weight: 400;
  color: rgba(95, 101, 108, 1);
  line-height: 24px;
  text-align: center;
}
</style>
