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

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

  const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
  const variantClass = $derived(block.variant === "right" ? "text-right" : "text-left");
</script>

<div class={layoutClasses} data-block-type="quote" data-block-slug={block._slug}>
  <blockquote class="border-l-2 border-wald-400 pl-4 {variantClass}">
    <p class="text-lg font-extralight text-wald-600">{block.quote ?? ""}</p>
    {#if block.author}
      <cite class="block font-sans! text-xs text-wald-400"> » {block.author}</cite>
      {/if}
    </blockquote>
</div>

