<template>
  <v-card class="mx-auto" max-width="400" tile nuxt :to="slug">
    <v-list-item>
      <!-- <v-list-item-avatar color="grey"></v-list-item-avatar> -->
      <v-list-item-content>
        <v-list-item-subtitle>
          <v-chip class="ma-2" color="primary">
            {{ course }}
          </v-chip>
        </v-list-item-subtitle>
        <v-list-item-title>{{ title }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>

    <v-img :src="cover" class="my-5" />

    <!-- <v-card-title class="pb-0">{{ title }}</v-card-title> -->

    <!-- <v-card-text class="primary--text">
      <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
        officiis pariatur aliquid id ipsam magnam neque quo dicta veritatis
        iusto.
      </div>
    </v-card-text> -->

    <v-card-actions class="d-flex flex-column">
      <v-btn color="orange" text> Share </v-btn>

      <v-btn color="orange" text> Explore </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  props: {
    cover: {
      type: String,
    },
    title: {
      type: String,
    },
    course: {
      type: String,
    },
    gratis: {},
    slug: {
      type: String,
    },
  },
}
</script>
