<template>
  <q-card-section class="row items-center col-12 q-py-sm">
    <div class="row col-11">
      <div class="text-bold">ข้อกำหนดและเงื่อนไข</div>
    </div>
    <q-space />
    <q-btn
      icon="close"
      unelevated
      round
      dense
      @click="close"
      style="color: #ff8080; background-color: #ffdede"
    />
  </q-card-section>
  <q-separator />
  <q-card-section style="max-height: 50vh" class="scroll">
    <div class="text-center">
      <div class="col-12 text-subtitle1 text-weight-bold text-negative q-pt-sm">
        ข้อกำหนดและเงื่อนไขฉบับนี้ ถือเป็นข้อตกลงในการเก็บข้อมูล
      </div>
      <q-card class="col-12 q-pa-md" flat>
        <q-card-section class="text-black text-left"
          >ข้าพเจ้าเข้าใจดีว่า ผู้ให้บริการ จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของข้าพเจ้า
          เพื่อวัตถุประสงค์ในการให้บริการตามสัญญานี้ การวิเคราะห์ข้อมูลเพื่อวางแผนทางการตลาด
          การนำเสนอสินค้าและบริการอื่นๆ ของผู้ให้บริการแก่ข้าพเจ้า รวมถึงวัตถุประสงค์อื่นๆ
          ตามที่ผู้ให้บริการเห็นสมควร <br /><br />
          ข้าพเจ้ารับทราบดีกว่า หากข้าพเจ้าไม่ตกลงยอมรับข้อกำหนดและเงื่อนไขนี้
          ผู้ให้บริการสงวนสิทธิไม่ให้บริการแก่ข้าพเจ้าได้
        </q-card-section>
      </q-card>
    </div>
  </q-card-section>
  <q-separator />
  <q-card-actions align="right" class="bg-white text-teal">
    <q-btn label="ตกลง" color="primary" @click="ok" />
  </q-card-actions>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
const props = defineProps({
  close: {
    type: Function,
    default: () => console.log('not function')
  },
  ok: {
    type: Function,
    default: () => console.log('not function')
  }
})

const ok = async () => {
  props.ok()
}

const close = async () => {
  props.close()
}
</script>
<style>
.mycard {
  border-radius: 30px 30px 0px 0px;
}
.mycardxl {
  border-radius: 30px;
}
</style>
