<template>
  <div
    class="h-12 bg-white flex justify-between items-center px-3 rounded-lg"
    @click="$emit('click')"
  >
    <div class="flex items-center">
      <div class="w-7 flex justify-center">
        <IconVue :name="iconName" color="#4E61C9" :size="iconSize || '15'" />
      </div>
      <span class="text-sm text-gray-800 ml-3">{{ label }}</span>
    </div>
    <IconVue name="icon-gengduo" color="#8E92A3" size="14" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import IconVue from "@/components/common/Icon.vue";

export default defineComponent({
  emits: ["click"],
  components: {
    IconVue,
  },
  props: {
    iconName: {
      type: String,
      default: "",
    },
    iconSize: String,
    label: {
      type: String,
      default: "",
    },
  },
  setup() {
    return {};
  },
});
</script>

<style scoped></style>
