import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplProfile from './RplProfile.vue'
import { a11yStoryCheck } from './../../../stories/interactions.js'

export const SingleTemplate = (args) => ({
  components: { RplProfile },
  setup() {
    return { args }
  },
  template: '<RplProfile v-bind="args" />'
})

<Meta
  title='Core/Containers/Profile'
  component={RplProfile}
  args={{
    image: {
      src: svgPlaceholder({ width: 400, height: 600 }),
      alt: ''
    },
    items: [
      {
        term: "Name:", description: "Professor Jan Kowalski"
      },
      {
        term: "Field of expertise:", description: "Design, architecture and planning"
      }
    ]
  }}
/>

# Profile

<ArgsTable of={RplProfile} />

<Canvas>
  <Story
    name='Default'
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='Long title'
    play={a11yStoryCheck}
    args={{
      items: [
        {
          term: "Name:", description: "Adjunct Associate Professor Emeritus Jan Kowalski"
        },
        {
          term: "Field of expertise:", description: "Design, architecture and planning and Design, architecture and planning and Design, architecture and planning and Design, architecture and planning and Design, architecture and planning and Design, architecture and planning and Design, architecture and planning"
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
