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

  let { block }: { block: LinkListBlockData } = $props();

  const layoutClasses = $derived(
    block.layout ? getBlockLayoutClasses(block.layout) : "col-span-12 mb-4",
  );
  const links = $derived(block.links ?? []);
</script>

<div class={layoutClasses} data-block-type="link_list" data-block-slug={block._slug}>
  {#if block.headline}
    <h3 class="mb-2 font-semibold text-zinc-900">{block.headline}</h3>
  {/if}
  <ul class="list-disc space-y-1 pl-5">
    {#each links as link}
      {#if typeof link === "object" && link !== null && "url" in link}
        <li>
          <a
            href={(link as { url?: string }).url ?? "#"}
            class="underline text-green-700 hover:text-green-800"
            target={(link as { newTab?: boolean }).newTab ? "_blank" : undefined}
            rel={(link as { newTab?: boolean }).newTab ? "noopener noreferrer" : undefined}
          >
            {(link as { linkName?: string }).linkName ?? (link as { url?: string }).url}
          </a>
        </li>
      {:else}
        <li>
          <span class="text-zinc-500">{typeof link === "string" ? link : "Link"}</span>
        </li>
      {/if}
    {/each}
  </ul>
</div>
