<template>
  <div class="styleguide__editor__module py-2">
    <div class="font-bold flex items-center justify-between">
      {{ groupName }}
      <button
        class="text-xs p-2 rounded bg-blue-400 text-white"
        @click="showList = !showList"
      >
        <span v-if="showList">close</span>
        <span v-else>open</span>
      </button>
    </div>
    <ul v-if="showList" class="pl-4 pt-2">
      <li v-for="(option, key) in items" :key="`${option.util}-${key}`">
        <theme-prop
          :property="{
            name: option.util,
            cssProp: option.cssProp,
            value: variables[`--sui-${option.util}`],
            type: 'color',
            _prop: colorOption,
          }"
          @property="handlePropertyInput"
        />
        <!-- {{ colorOptions }} -->
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    groupName: {
      type: String,
      default: '',
    },
    variables: {
      type: String,
      default: '',
    },
    items: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      showList: true,
    }
  },
}
</script>

<style lang="scss" scoped></style>
