<script lang="ts">
  import BadgeContainer from './Badges.svelte';

  export let identifier: string | null | undefined;
  export let secondaryIdentifier: string | null | undefined;
  export let badges: BioSiteBadge[] = [];

  export let align: BioSiteAlign = 'LEFT';
  export let placeholder: boolean = false;
</script>

<div class="flex flex-col" class:placeholder>
  <div
    class="primary-id text-xl font-semibold text-text-header flex gap-2 items-center"
    class:justify-center={align === 'CENTER'}
    class:justify-end={align === 'RIGHT'}>
    <p class="break-words line-clamp-1">{(identifier ?? secondaryIdentifier ?? 'Unknown').trim()}</p>
    {#if placeholder}
      <div class="placeholder-container" />
    {/if}
    {#if badges.length > 0 && !placeholder}
      <BadgeContainer {badges} />
    {/if}
  </div>
  <div
    class="secondary-id text-text-secondary"
    class:text-center={align === 'CENTER'}
    class:text-right={align === 'RIGHT'}>
    <p class="break-words line-clamp-1">{(!identifier ? '' : secondaryIdentifier || '').trim()}</p>
    {#if placeholder}
      <div class="placeholder-container" />
    {/if}
  </div>
</div>

<style lang="postcss">
  div.placeholder > * {
    @apply w-fit px-2 overflow-hidden select-none rounded-md relative opacity-50;
  }

  div.placeholder > * {
    @apply bg-text-teritary !text-text-teritary;
  }

  div.placeholder > div.primary-id {
    @apply mb-[1px];
  }

  div.placeholder-container {
    @apply absolute top-0 left-0 bottom-0 right-0;
  }

  div.placeholder div.placeholder-container {
    animation: slide 1s infinite;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(128, 186, 232, 0) 99%,
      rgba(125, 185, 232, 0) 100%
    );
  }

  @keyframes slide {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
</style>
