<template>
  <v-list-item :class="props.divider ? border : defaultBorder">
    <v-row>
      <v-col cols="4" class="text-subtitle-2">
        <slot name="title"> List Title </slot>
      </v-col>

      <v-col cols="8" class="text-subtitle-2">
        <slot name="value"> value </slot>
      </v-col>
    </v-row>

    <template #append>
      <slot name="append">
        <v-icon size="30">{{ props.icon }}</v-icon>
      </slot>
    </template>
  </v-list-item>
</template>

<script setup lang="ts">
const props = defineProps({
  divider: {
    type: Boolean,
    default: true,
  },
  icon: {
    type: String,
    default: "mdi-chevron-right",
  },
});

const defaultBorder = "pa-0 pl-8 pr-6 py-4";
const border = "border-b-sm" + " " + defaultBorder;
</script>
