<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>

<div class="flex 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>


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