import {Controls, Canvas, Meta, Source, Story} from '@storybook/blocks';
import * as CollapsibleListStories from './CollapsibleList.stories';

<Meta of={CollapsibleListStories} />

<div className="header">
  <h1>CollapsibleList</h1>
  <p>L’élément `CollapsibleList` est utilisé pour afficher des listes de liens. Cette liste affiche tout le contenu sur les grands écrans et une liste accordéon sur mobile.</p>
</div>

<Canvas of={CollapsibleListStories.Default}  />

# API

<Controls of={CollapsibleListStories.Default} />

<Source dark code={`
<script setup lang="ts">
	import { CollapsibleList } from '@cnamts/synapse'
	import type { ListItem } from '@cnamts/synapse/src/components/CollapsibleList/types'

	const remboursementItems = [
		{
			text: 'Remboursement',
			href: '/remboursement',
		},
		{
			text: 'Remboursement',
			href: '/remboursement',
		},
		{
			text: 'Remboursement',
			href: '/remboursement',
		},
		{
			text: 'Remboursement',
			href: '/remboursement',
		},
	] as ListItem[]
</script>
import '../../stories/styles/shared.css';

<template>
	<CollapsibleList
		:items="remboursementItems"
		list-title="Remboursement"
	/>
</template>
`} />