<script lang="ts">
  export let date: string | Date;
  export let readDuration: number | undefined;
  export let rating: string | number | undefined;
  export let author: string | undefined;

  const toDate = (d: string | Date) =>
    typeof d === "string" ? new Date(d) : d;

  const iso = (d: string | Date) => {
    if (!d) return "";
    const v = toDate(d);
    if (!v?.getTime) return "";
    return isNaN(v.getTime()) ? "" : v.toISOString();
  };

  function formatRating(rating: string | number) {
    if (typeof rating === "number") {
      return "⭐".repeat(rating);
    }
    return rating;
  }

  const formatDate = (d: string | Date) => {
    try {
      return new Intl.DateTimeFormat("de-DE", {
        day: "2-digit",
        month: "long",
        year: "numeric",
      }).format(toDate(d));
    } catch (err) {
      return "";
    }
  };
</script>

{#if rating || date || readDuration || author}
  <div class="flex flex-wrap gap-3 wrapper">
    {#if rating}
      <div class="text-sm bg-light">{formatRating(rating)}</div>
    {/if}
    {#if date}
      <time class="text-sm bg-light" datetime={iso(date)}
        >{formatDate(date)}</time>
    {/if}
    {#if readDuration > 1}
      <div class="text-sm bg-light">{readDuration} mins read</div>
    {/if}
    {#if author}
      <div class="text-sm bg-light">{author}</div>
    {/if}
  </div>
{/if}

<style>
  .wrapper > * {
    padding: 2px 11px;
    border-radius: 14px;
    font-size: 11px;
    opacity: 0.7;
    white-space: nowrap;
  }
</style>
