<script setup lang="ts">
import ItRow from "@/components/ui/ItRow.vue";

export interface Props {
  avatarUrl: string;
  name: string;
  extraInfo?: string;
}

const props = withDefaults(defineProps<Props>(), {
  extraInfo: "",
});
</script>

<template>
  <ItRow>
    <template #firstRow>
      <slot name="leading"></slot>
      <img class="mr-2 h-11 w-11 rounded-full" :src="props.avatarUrl" />
      <p class="text-bold lg:leading-[45px]">
        {{ props.name }}
        <span v-if="props.extraInfo" class="font-normal">{{ props.extraInfo }}</span>
      </p>
    </template>
    <template #center>
      <slot name="center"></slot>
    </template>
    <template #link>
      <slot name="link"></slot>
    </template>
  </ItRow>
</template>

<style lang="scss" scoped></style>
