<template>
  <div>
    <div class="gradient-profile relative border-b border-indigo-300">
      <user-banner class="h-24 xl:h-40 bg-indigo-200" :user="user"
                   size="hero"
      />
    </div>

    <div class="-mt-14 xl:-mt-24 relative xl:container xl:mx-auto px-5 xl:px-10">
      <div class="flex flex-col md:flex-row">
        <div class="flex-shrink-0 self-center md:self-start md:mr-6 2xl:mr-10">
          <user-avatar :user="user" size="medium"
                       class="shadow-classic object-cover w-28 h-28 text-xl xl:w-48 xl:h-48 xl:text-3xl"
          />
        </div>
        <div class="w-full">
          <div class="h-12 xl:h-24 hidden md:block"></div>
          <div class="mt-2 ">
            <div class="-mx-2 -my-2 lg:-mx-4 lg:-my-4 flex flex-col md:flex-row flex-wrap xl:flex-nowrap justify-between">
              <div class="max-w-[300px] text-center md:text-left mx-2 my-2 lg:mx-4 lg:my-4 flex flex-shrink-0 flex-col self-center md:self-start">
                <inertia-link :href="route('profile.user', user.username)" class="text-lg xl:text-2xl block font-semibold text-white">
                  {{ user.name }}
                </inertia-link>
                <h2 class="text-sm xl:text-base text-gray-light">
                  @{{ user.username }}
                </h2>
              </div>
              <div class="mx-2 my-2 lg:mx-4 lg:my-4 flex flex-col items-end">
                <slot name="menu" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
import UserBanner from '@/Shared/Misc/UserBanner.vue'

export default {
    components:{
        UserAvatar,
        UserBanner
    },
    props: {
        user: {
            type: Object,
            default: () => {}
        }
    }
}

</script>
