---
interface Props {
  text: string;
  source?: string;
}

const { text, source } = Astro.props;
---

<blockquote>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 36px; width: auto; fill: currentcolor;"
    ><path
      d="M28 18L28 10 20 10 20 18 26 18C26 21.3137085 23.3137085 24 20 24L20 26C24.418278 26 28 22.418278 28 18L28 18zM26 12L26 16 22 16 22 12 26 12 26 12zM16 18L16 10 8 10 8 18 14 18C14 21.3137085 11.3137085 24 8 24L8 26C12.418278 26 16 22.418278 16 18L16 18zM14 12L14 16 10 16 10 12 14 12 14 12z"
      fill-rule="evenodd"></path></svg
  >
  {text}
  {
    source && (
      <footer>
        <cite>&mdash; {source}</cite>
      </footer>
    )
  }
</blockquote>

<style>
  blockquote {
    border: 1px solid rgba(34, 36, 38, 0.15);
    margin: 1rem 0;
    border-color: transparent;
    border-radius: 1rem;
    position: relative;
    margin-top: 4rem;
    margin-bottom: 4rem;
    font-size: 1.2rem;
    box-shadow: 0.25rem 0.25rem 2rem var(--neumorph-shadow-darker), -0.5rem -0.5rem 1rem var(--neumorph-shadow-lighter);
    background: var(--bg-color);
    --spacing: 2rem 2.5rem 2rem 2rem;
    padding: 2rem 2.5rem 2rem 2rem;
    display: flex;
    align-items: flex-start;
    line-height: 1;
  }
  blockquote svg {
    opacity: 0.33333;
    height: 3rem !important;
    flex-shrink: 0;
    margin-right: 1rem;
    margin-top: -0.75rem;
  }
</style>