<script lang="ts" setup>
import { user_store } from '@/ts/user_info'
</script>

<template>
  <div class="bg-primary ring-2 ring-primary/80">
    <div class="flex flex-row w-full h-full p-4 space-x-4 rounded-sm">
      <div class="md:min-w-fit md:min-h-fit md:max-w-fit md:max-h-fit max-w-32 max-h-32">
        <img
          class="fixed z-1 max-w-[96px] max-h-[96px] md:max-w-[128px] md:max-h-[128px]"
          :src="user_store.Avatar_Decoration"
        />
        <img
          class="max-w-[96px] max-h-[96px] mask-clip-border rounded-full md:max-w-[128px] md:max-h-[128px] drop-shadow-accent drop-shadow-md border-8 border-accent"
          :src="user_store.Avatar"
        />
      </div>
      <div class="w-full m-auto drop-shadow-md drop-shadow-accent text-accent">
        <p class="text-xl md:text-3xl">
          {{ user_store.Global_Name }}
        </p>
        <a
          class="ml-2 text-white text-md md:text-xl hover:text-gray-300"
          :href="user_store.Id"
          target="_blank"
        >
          @{{ user_store.Username }}
        </a>
      </div>
    </div>
  </div>
</template>
