<template>
  <div class="relative">
    <button
      class="flex flex-row items-center space-x-2 rounded-full px-1 py-1 pr-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
    >
      <div
        class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-gray-200"
      >
        <UserIcon class="h-5 w-5" />
      </div>
      <span>{{ user.name }}</span>
      <ChevronDownIcon class="ml-2 h-5 w-5" />
    </button>
  </div>
</template>

<script setup lang="ts">
import { ChevronDownIcon, UserIcon } from '@heroicons/vue/24/outline';
import { User } from '../../interfaces/user.interfaces';

const props = defineProps<{
  user: User;
}>();
</script>
