<script setup>
defineProps(['conditions']);
</script>

<template>
  <div v-for="p in conditions">
    <div class="justify-center my-8 select-none flex" >
        <button class="py-2 px-4 shadow-md no-underline rounded-full bg-blue-600 text-white font-sans font-semibold text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2">{{ p.pre }}</button>
        <button class="py-2 px-4 shadow-md no-underline rounded-full bg-orange-600 text-white font-sans font-semibold text-sm border-orange btn-primary hover:text-white hover:bg-orange-light focus:outline-none active:shadow-none mr-2">{{ p.field.desc }}</button>
        <button class="py-2 px-4 shadow-md no-underline rounded-full bg-red-600 text-white font-sans font-semibold text-sm border-red btn-primary hover:text-white hover:bg-red-light focus:outline-none active:shadow-none">{{ p.criteria.name }}</button>
        <button class="py-2 px-4 shadow-md no-underline rounded-full bg-yellow-600 text-black font-sans font-semibold text-sm border-red btn-primary hover:text-white hover:bg-red-light focus:outline-none active:shadow-none">{{ p.value }}</button>	
        <slot />
    </div>
  </div>
</template>