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

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

  const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
  const alignClass = $derived(
    block.align === "center"
      ? "text-center"
      : block.align === "right"
        ? "text-right"
        : "text-left",
  );
  const Tag = $derived((block.tag || "h2") as "h1" | "h2" | "h3" | "h4" | "h5" | "h6");
</script>

<div class={layoutClasses} data-block-type="headline" data-block-slug={block._slug}>
  <svelte:element
    this={Tag}
    class={alignClass}
  >
    {block.text ?? ""}
  </svelte:element>
</div>
