ZvDisclosure ​

<template>
  <div v-for="({ label, icon, content }, index) in reassuranceItems" :key="index">
    <ZvDisclosure class="w-96">
      <ZvDisclosureButton v-slot="{ open }" class="flex w-full items-center justify-between gap-5 px-7 py-5">
        <ZvIcon :name="icon" size="large" />
        <span class="font-sans text-xs">
          {{ label }}
        </span>
        <ZvIcon
          name="chevron-up-lighter"
          size="small"
          class="ml-auto transform transition-transform duration-300"
          :style="open ? 'transform: rotate3d(0, 0, 0, 180deg)' : 'transform: rotate3d(1, 0, 0, 180deg)'"
        />
      </ZvDisclosureButton>
      <ZvDisclosurePanel class="px-7 py-6 font-sans text-xs">
        {{ content }}
      </ZvDisclosurePanel>
    </ZvDisclosure>
  </div>
</template>

<script lang="ts" setup>
  import ZvDisclosure from '@zadigetvoltaire/ui/components/ZvDisclosure'
  import ZvDisclosureButton from '@zadigetvoltaire/ui/components/ZvDisclosureButton'
  import ZvDisclosurePanel from '@zadigetvoltaire/ui/components/ZvDisclosurePanel'
  import ZvIcon from '@zadigetvoltaire/ui/components/ZvIcon'

  const reassuranceItems = [
    {
      label: 'Livraison gratuite en 4 jours ouvrés',
      icon: 'truck',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    },
    {
      label: 'Essayez maintenant, payez plus tard',
      icon: 'hanger',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    },
    {
      label: 'Livraison gratuite en 4 jours ouvrés',
      icon: 'return',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    },
    {
      label: 'Essayez maintenant, payez plus tard',
      icon: 'chat',
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    },
  ]
</script>