<script lang="ts">
  import statuses from '$lib/discord-statuses';

  export let status: string;
  export let activity: string | null | undefined = undefined;

  const statusObject = statuses.find((x) => x.id == status);
</script>

{#if statusObject}
  <span
    class="font-medium text-[var(--color)] before:inline-block before:content-[''] before:w-3 before:h-3 before:min-w-[0.75rem] before:min-h-[0.75rem] before:bg-[var(--color)] before:rounded-full before:mr-1"
    style="--color: {statusObject.color}">
    {statusObject.text}
  </span>
  {#if activity}
    and
  {/if}
{/if}
