<script lang="ts">
  import type { OrganisationEntry } from "../lib/block-types";

  let { org }: { org: OrganisationEntry } = $props();

  const link = $derived(typeof org.link === "object" ? org.link : null);
  const badge = $derived(typeof org.badge === "object" ? org.badge : null);

  function badgeClasses(color?: string): string {
    switch (color) {
      case "green": return "bg-wald-50 text-wald-700 border border-wald-200";
      case "blue":  return "bg-himmel-50 text-himmel-700 border border-himmel-200";
      case "amber": return "bg-[#fdf8ec] text-[#a6780a] border border-[#f0d98a]";
      default:      return "bg-stein-100 text-stein-600 border border-stein-200";
    }
  }
</script>

<div class="flex flex-col gap-2 rounded-lg border border-stein-200 bg-white p-4 shadow-sm">
  <div class="flex items-start justify-between gap-2">
    <h5 class="text-base font-semibold text-stein-900 leading-snug">{org.name ?? ""}</h5>
    {#if badge?.label}
      <span class="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium {badgeClasses(badge.color)}">
        {badge.label}
      </span>
    {/if}
  </div>
  {#if org.description}
    <p class="text-sm text-stein-600">{org.description}</p>
  {/if}
  {#if link?.url}
    <a
      href={link.url}
      class="no-underline mt-auto inline-flex items-center gap-1 text-sm font-medium text-himmel-600 hover:text-himmel-700 transition-colors"
    >
      {link.linkName ?? link.url}
      <span aria-hidden="true">→</span>
    </a>
  {/if}
</div>
