<script lang="ts">
  import { formatPostDate } from "../lib/blog-utils";
  import Tag from "./Tag.svelte";
  import Tags from "./Tags.svelte";

  type TagItem = string | { name?: string; _slug?: string };
  type TagVariant = "white" | "green" | "blue";

  let {
    date = null,
    tags = [],
    tagVariant = "white",
    tagBase = null,
  }: {
    date?: string | null;
    tags?: TagItem[];
    tagVariant?: TagVariant;
    tagBase?: string | null;
  } = $props();
</script>

<div class="mb-1 min-w-0 flex flex-nowrap gap-1 items-center overflow-x-auto overflow-y-hidden p-1 pb-4">
  {#if date}
    <Tag label={formatPostDate(date)} variant="date" />
  {/if}
  <div class="flex flex-nowrap gap-1 items-center shrink-0">
    <Tags tags={tags} variant={tagVariant} tagBase={tagBase} />
  </div>
</div>
