<script lang="ts">
  import Icon from '$lib/components/Icon.svelte';
  import type { InfoContent } from '$lib/types';

  export let info: InfoContent;
</script>

<section id="info">
  <div class="info-inner">
    <div class="info-block">
      <h2><Icon name="fas fa-location-dot" /> {info.title}</h2>
      <p>{info.intro}</p>
      <p class="info-copy">{info.suburbs}</p>
      <p class="info-copy">
        {info.nearbyText}
        <a href={info.nearbyCta.href}>{info.nearbyCta.label}</a>
      </p>
      <h3>{info.hoursLabel}</h3>
      <p>{info.hours}</p>
    </div>

    <div class="info-block">
      <h2><Icon name="fas fa-circle-question" /> {info.faqTitle}</h2>
      <div class="faq">
        {#each info.faqs as faq}
          <details>
            <summary>{faq.question}</summary>
            <p>{faq.answer}</p>
          </details>
        {/each}
      </div>
    </div>
  </div>
</section>
