component Blockquote {
  props {
    quote: string = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
    citation: string = ""
    citationTitle: string = ""
    citationUrl: string = ""
    avatarSrc: string = ""
    avatarAlt: string = ""
    size: string = "md"
    color: string = "primary"
    align: string = "left"
    variant: string = "default"
    quoteMark: boolean = true
    italic: boolean = true
    class: string = ""
  }

  view {
    <figure
      {...attrs}
      class="wire-next wire-next--blockquote wire-next--color-{color} wire-next--size-{size} {class}"
      data-size="{size}"
      data-color="{color}"
      data-align="{align}"
      data-variant="{variant}"
      data-italic="{italic}"
    >
      <blockquote cite="{citationUrl}">
        {#if quoteMark}
          <span class="wire-next__blockquote-mark" aria-hidden="true">“</span>
        {/if}

        <div class="wire-next__blockquote-copy">
          {#if quote}
            <p>{quote}</p>
          {:else}
            <slot />
          {/if}
        </div>
      </blockquote>

      {#if citation || citationTitle || avatarSrc}
        <figcaption class="wire-next__blockquote-citation">
          {#if avatarSrc}
            <img
              class="wire-next__blockquote-avatar"
              src="{avatarSrc}"
              alt="{avatarAlt}"
              loading="lazy"
            />
          {/if}

          <span class="wire-next__blockquote-attribution">
            {#if citation}
              {#if citationUrl}
                <cite><a href="{citationUrl}">{citation}</a></cite>
              {:else}
                <cite>{citation}</cite>
              {/if}
            {/if}
            {#if citationTitle}<span>{citationTitle}</span>{/if}
          </span>
        </figcaption>
      {/if}
    </figure>
  }
}