<script lang="ts">
  import Description from './profile/Description.svelte';
  import Footer from './profile/Footer.svelte';
  import Name from './profile/Name.svelte';
  import Panel from './elements/Panel.svelte';
  import Socials from './profile/Socials.svelte';
  import Avatar from './profile/Avatar.svelte';
  import Extra from './profile/Extra.svelte';

  export let displayName: string;
  export let username: string;
  export let badges: BioSiteBadge[];
  export let description: string | null;
  export let socials: BioSiteSocials | undefined = undefined;
  export let uid: number;
  export let uniqueId: string;
  export let views: number | null;
  export let align: BioSiteAlign;
  export let location: string | undefined = undefined;
  export let school: string | undefined = undefined;
  export let workplace: string | undefined = undefined;

  export let preview: boolean = false;
  export let placeholder: boolean = false;

  export let loadTime: number | undefined = undefined;
  export let previewUid: boolean | undefined = undefined;
  export let storelessSocials: boolean = false;

  $: uidLocal = uid === -1 ? undefined : uid;
</script>

<Panel {preview}>
  <div class="flex flex-col gap-4">
    <Avatar {uniqueId} {align} {loadTime} />

    <Name identifier={displayName} secondaryIdentifier={`@${username}`} {badges} {align} {placeholder} />

    <Description {description} />

    <Extra {location} {school} {workplace} />

    <Socials {socials} {storelessSocials} />

    <slot />

    <Footer uid={previewUid === undefined ? uid : previewUid === true ? uidLocal ?? -2 : undefined} {views} />
  </div>
</Panel>
