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

withDefaults(
    defineProps<{
        item: Object;
        // type: string;
    }>(),
    {
        item: () => ({}),
        // type: () => ({}),
    }
)
const emit = defineEmits(["detail"]);
</script>
<template>
    <v-card
            elevation="10"
            :class="[
              'mx-auto',
              item.status === 'planned'
                ? ''
                : item.status === 'in-progress'
                ? 'bg-info'
                : item.status === 'completed'
                ? 'bg-success'
                : item.status === 'cancelled'
                ? 'bg-error'
                : '',
            ]"
          >
            <template v-slot:prepend>
              <v-avatar
                size="50"
                :class="[
                  'mx-auto rounded-md',
                  item.status === 'planned'
                    ? ''
                    : item.status === 'in-progress'
                    ? 'bg-info'
                    : item.status === 'completed'
                    ? 'bg-success'
                    : item.status === 'cancelled'
                    ? 'bg-error'
                    : '',
                ]"
              >
                <Icon
                  icon="solar:user-circle-broken"
                  :class="[
                    item.status === 'planned'
                      ? 'text-primary'
                      : item.status === 'in-progress'
                      ? 'text-primary'
                      : item.status === 'completed'
                      ? 'text-light'
                      : item.status === 'cancelled'
                      ? 'text-light'
                      : '',
                  ]"
                  height="36"
                />
              </v-avatar>
            </template>
            <template v-slot:title>
                <h3>{{item.display}}</h3>
              <!-- <h3>{{ item.subject.display }}</h3> -->
            </template>
            <template v-slot:subtitle> </template>
            <template v-slot:text>
              <div class="pl-3">
                <div class="align-center d-flex">
                  <!-- <Icon icon="mdi:doctor" class="text-primary" height="25" />
                  <h4>actor</h4> -->
                  <!-- <h4>{{ item.participant[0].actor.display }}</h4> -->
                </div>
              </div>
              <div class="pl-3 pt-2">
                <div class="align-center d-flex">
                  <!-- <Icon
                    icon="mdi:hospital-marker"
                    class="text-primary"
                    height="25"
                  /> -->
                  <!-- <h4>location</h4> -->
                  <!-- <h4>Sps. {{ item.location[0].location.display }}</h4> -->
                </div>
              </div>
            </template>
            <template v-slot:actions>
              <v-btn color="primary" class="ms-auto" @click="emit('detail', props?.item)">Detail</v-btn>
               <!-- <v-btn v-for="itemButton in showButtons" @click="$emit(itemButton.tipe, props?.item)" :color="itemButton.color" class="ms-auto">
                    <v-icon :color="itemButton.color">{{ itemButton.icon }}</v-icon>
                    {{ itemButton.text }}
                </v-btn> -->
            </template>
          </v-card>
</template>