<script props>
  module.exports = {
    onclick: props.onclick || '',
    titlestyle: props.titlestyle || '',
    headerstyle: props.headerstyle || '',
    person: props.person,
  }
</script>
<div class="interest">
  <a href="/src/who_we_are.html#{{person}}" hx-get="/partials/who_we_are.html" hx-push-url="/who_we_are.html#{{person}}"
    hx-swap="innerHtml show:#{{person}}:top">
    <div class="figure">
      <x-img src="/assets/{{person}}.jpg" class="person">
    </div>
  </a>
  <!-- <svg class="thought-bubble" height="4rem" width="4rem" viewBox="0 0 4 4" style="min-width: 4rem;"> -->
  <!-- <circle cx="2" cy="2" r="2" fill="#484848"></circle> -->
  <!-- </svg> -->
  <div class="thought-bubble"></div>
  <x-project onclick="{{onclick}}" titlestyle="{{titlestyle}}" headerstyle="{{headerstyle}}">
    <if condition="$slots.img?.filled">
      <fill:img>
        <slot:img></slot:img>
      </fill:img>
    </if>
    <if condition="$slots.title?.filled">
      <fill:title>
        <slot:title></slot:title>
      </fill:title>
    </if>
    <if condition="$slots.links?.filled">
      <fill:links>
        <slot:links></slot:links>
      </fill:links>
    </if>
    <if condition="$slots.subtitle?.filled">
      <fill:subtitle>
        <slot:subtitle></slot:subtitle>
      </fill:subtitle>
    </if>
    <if condition="$slots.description?.filled">
      <fill:description>
        <slot:description></slot:description>
      </fill:description>
    </if>
  </x-project>
</div>