<template>
  <div
    class="relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:border-gray-400"
  >
    <div class="flex-shrink-0 rounded-md bg-gray-100 p-2">
      <c-avatar
        :image="image.image"
        :rounded="image.rounded"
        :size="image.size"
        :imageResizeClass="'object-contain'"
      ></c-avatar>
    </div>
    <div class="min-w-0 flex-1">
      <a href="#" class="focus:outline-none">
        <span class="absolute inset-0" aria-hidden="true"></span>
        <div class="flex" :class="classes">
          <p class="text-sm text-gray-900">
            {{ name }}
          </p>
          <slot></slot>
        </div>
        <p class="truncate text-sm text-gray-500">
          {{ description }}
        </p>
      </a>
    </div>
  </div>
</template>

<script>
import CAvatar from "../CAvatar/CAvatar.vue";
export default {
  name: "CCard",
  components: { CAvatar },
  props: {
    image: {
      type: Object,
    },
    name: {
      type: String,
    },
    description: {
      type: String,
    },
    classes: {
      type: String,
      default: "",
    },
  },
};
</script>

<style></style>
