<template>
  <div class="bg-m-secondary w-[250px] h-[259px] rounded-md mx-4 shadow-md/50 shadow-black">
    <p class="font-bold text-3xl text-m-tertiary my-1 mx-3">
      Backup
    </p>
    <button
        type="button"
        class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
        @click="select('bitwarden')"
    >
      <p class="font-bold uppercase text-xl ml-[24px]">
        bitwarden
      </p>
      <IconifyIcon
          icon="mdi:eye"
          class="text-black text-2xl mr-[24px]"
      />
    </button>

    <button
        type="button"
        class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
        @click="select('inventory')"
    >
      <p class="font-bold uppercase text-xl ml-[24px]">
        inventory
      </p>
      <IconifyIcon
          icon="mdi:eye"
          class="text-black text-2xl mr-[24px]"
      />
    </button>

    <button
        type="button"
        class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
        @click="select('sirh')"
    >
      <p class="font-bold uppercase text-xl ml-[24px]">
        sirh
      </p>
      <IconifyIcon
          icon="mdi:eye"
          class="text-black text-2xl mr-[24px]"
      />
    </button>

    <button
        type="button"
        class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
        @click="select('ferme')"
    >
      <p class="font-bold uppercase text-xl ml-[24px]">
        ferme
      </p>
      <IconifyIcon
          icon="mdi:eye"
          class="text-black text-2xl mr-[24px]"
      />
    </button>

    <button
        type="button"
        class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
        @click="select('user')"
    >
      <p class="font-bold uppercase text-xl ml-[24px]">
        user
      </p>
      <IconifyIcon
          icon="mdi:eye"
          class="text-black text-2xl mr-[24px]"
      />
    </button>
  </div>
</template>

<script setup lang="ts">
import { Icon as IconifyIcon } from "@iconify/vue"

const emit = defineEmits(["select"])

const select = (name: string) => {
  emit("select", name)
}
</script>

