<script setup lang="ts">
const props = defineProps<{
  avatarUrl: string;
  name: string;
}>();
</script>

<template>
  <li
    class="py-4 leading-[45px] border-t border-gray-500 flex flex-col lg:flex-row justify-between"
  >
    <div class="flex flex-row md:w-1/4 items-center">
      <img class="h-[45px] rounded-full mr-2" :src="avatarUrl" />
      <p class="text-bold lg:leading-[45px]">{{ name }}</p>
    </div>
    <div class="flex-1 flex items-center">
      <slot name="center"></slot>
    </div>
    <div class="flex items-center">
      <slot name="link"></slot>
    </div>
  </li>
</template>

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