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

  let {
    block,
    bare = false,
    extraClass = "",
  }: { block: QuoteBlockData; bare?: boolean; extraClass?: string } = $props();

  const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
  const isCenter = $derived(block.variant === "center");
  const alignClass = $derived(
    isCenter ? "text-center" : block.variant === "right" ? "text-right" : "text-left",
  );
  const borderClass = $derived(isCenter ? "" : "border-l-4 border-green-700 pl-4");
</script>

{#snippet quoteMarkup()}
  <blockquote class="{borderClass} {alignClass} {extraClass}">
    <p class="text-lg text-zinc-700 mb-2! ">"{block.quote ?? ""}"</p>
    {#if block.author}
      <cite class="mt-1 block not-italic text-xs text-zinc-400">{block.author}</cite>
    {/if}
  </blockquote>
{/snippet}

{#if bare}
  {@render quoteMarkup()}
{:else}
  <div class={layoutClasses} data-block-type="quote" data-block-slug={block._slug}>
    {@render quoteMarkup()}
  </div>
{/if}
