import {Canvas, Meta, Controls, Source} from '@storybook/blocks';
import * as RatingPickerStories from './RatingPicker.stories';
import RatingPicker from './RatingPicker.vue';

<Meta title="Composants/Feedback/RatingPicker" component={RatingPicker}/>

<div className="header">
  <h1>RatingPicker</h1>
  <p>L’élément `RatingPicker` permet de recueillir l’avis d’un utilisateur.</p>
</div>

<Canvas story={{height: '150px'}} of={RatingPickerStories.Default}/>

# API

<Controls of={RatingPickerStories.Default}/>

## Utilisation de base

    <Source
        dark
        code={`
<script setup lang="ts">
    import { ref } from 'vue'
    import { RatingPicker } from '@cnamts/synapse'

    const ratingEmotion = ref(-1)
import '../../stories/styles/shared.css';
    const ratingNumber = ref(-1)
    const ratingStars = ref(-1)
</script>

<template>
   {{ ratingEmotion }}
    <RatingPicker
        v-model="ratingEmotion"
        label="Êtes-vous satisfait de ce service ?"
        type="emotion"
    />
    <br>
    {{ ratingNumber }}
    <RatingPicker
        v-model="ratingNumber"
        label="Êtes-vous satisfait de ce service ?"
        type="number"
    />
    <br>
    {{ ratingStars }}
    <RatingPicker
        v-model="ratingStars"
        label="Êtes-vous satisfait de ce service ?"
        type="stars"
    />
</template>
`}
/>