<script lang="ts" setup>
  import { Card } from 'ant-design-vue';

  const props = defineProps({
    controlId: {
      type: String,
      required: true,
    },
    checkedId: {
      type: String,
      required: true,
    },
  });
  const emit = defineEmits(['change']);

  const handleClick = () => {
    emit('change', props.controlId);
  };
</script>

<template>
  <Card
    :style="{ borderColor: props.controlId === props.checkedId ? '#3079FF' : '#fff' }"
    hoverable
    bordered
    class="w-60 h-60 border-2 widget-select !bg-light-50 cursor-pointer"
    @click="handleClick"
  >
    <div class="widget-container">
      <slot></slot>
    </div>
    <Card.Meta>
      <template #description>
        <slot name="description"></slot>
      </template>
    </Card.Meta>
  </Card>
</template>

<style scoped>
  .widget-select {
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
    border-width: 2px;
  }

  .widget-select:deep(.ant-card-body) {
    /* height: 240px; */

    /* width: 236px;
    height: 196px; */

    /* width: 100%;
    height: 100%; */
    width: 236px;
    height: 236px;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .widget-select:deep(.ant-card-meta) {
    border-top: 1px solid #f0f0f0;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin: 0;
  }

  .widget-select .widget-container {
    width: 236px;
    height: 196px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  [data-theme='dark'] .widget-select:deep(.ant-card-body) {
    @apply bg-dark-900;
  }

  [data-theme='dark'] .widget-select:deep(.ant-card) {
    @apply border-dark-300;
  }
</style>
