import {Controls, Canvas, Meta, Source} from '@storybook/blocks';

import * as SocialMediaLinksStories from './SocialMediaLinks.stories.ts';

<Meta of={SocialMediaLinksStories} />

<div className="header">
  <h1>SocialMediaLinks</h1>
  <p>Le composant `SocialMediaLinks` est utilisé pour afficher des liens de réseaux sociaux dans le composant `Footer`.</p>
</div>

<Canvas of={SocialMediaLinksStories.Default}  />

# API

<Controls of={SocialMediaLinksStories.Default} />

# Exemple d'utilisation

<Source dark code={`
<script setup lang="ts">
import { SocialMediaLinks } from '@cnamts/synapse'
import { mdiFacebook, mdiLinkedin } from '@mdi/js'

const xIcon = 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'

const links = [
	{
		icon: mdiLinkedin,
		name: 'LinkedIn',
		href: 'https://www.linkedin.com/company/assurance-maladie/',
	},
	{
		icon: mdiFacebook,
		name: 'Facebook',
		href: 'https://www.facebook.com/AssurMaladie/',
	},
	{
		icon: xIcon,
		name: 'X',
		href: 'https://x.com/Assur_Maladie',
	},
]
</script>
import '../../stories/styles/shared.css';

<template>
    <SocialMediaLinks :links="links" />
</template>
`} />