<template>
  <div class="trifle-list">
    <div
      class="trifle-list-item"
      v-for="(data, index) in datas"
      :key="index"
      :style="style"
    >
      <div v-if="isTitle">
        <div class="trifle-list-title">
          {{ data.title }}
        </div>
        <div class="trifle-list-description">
          {{ data.description }}
        </div>
      </div>
      <div v-else>
        <div class="trifle-list-description">
          {{ data }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'List',
  props: {
    size: {
      type: String,
      default: 'medium',
    },
    datas: {
      type: Array,
      default: [],
    },
    isTitle: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    style() {
      return {
        '--size': this.size === 'medium'
          ? '16px'
          : this.size === 'large'
            ? '24px'
            : '12px',
        '--font': this.size === 'medium'
          ? '16px'
            : this.size === 'large'
              ? '16px'
              : '14px',
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../const/variable.scss';

.trifle-list {
  border: 1px solid palette(gray, base);
  border-radius: 4px;

  .trifle-list-item {
    --size: 16px;
    padding: var(--size) 24px;
    --font: 16px;
    font-size: var(--font);

    border-bottom: 1px solid palette(gray, base);

    &:last-child {
      border-bottom: none;
    }

    .trifle-list-title {
      font-weight: bold;
      margin-bottom: 10px;
    }

  }
}
</style>
