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

  export let values: IconCard[];
</script>

<section id="values">
  <div class="values-inner">
    <h2 class="section-heading">Where dogs come first</h2>

    <div class="values-grid">
      {#each values as value}
        <div class="value-card">
          <Icon name={value.icon} className="value-card-icon" />
          <h3>{value.title}</h3>
          <p>{value.body}</p>
        </div>
      {/each}
    </div>
  </div>
</section>
