import {
  ArgsTable,
  Canvas,
  Description,
  Meta,
  Story,
} from "@storybook/addon-docs"

import VContentReportPopover from "~/components/VContentReport/VContentReportPopover.vue"

<Meta
  title="Components/VContentReportPopover"
  component={VContentReportPopover}
/>

export const Template = (args) => ({
  template: `<VContentReportPopover v-bind="args" class="float-right"/>`,
  components: { VContentReportPopover },
  setup() {
    return { args }
  },
})

# VContentReportPopover

<Description of={VContentReportPopover} />

<ArgsTable of={VContentReportPopover} />

<Canvas>
  <Story
    name="Default"
    args={{
      media: {
        identifier: "0aff3595-8168-440b-83ff-7a80b65dea42",
        foreign_landing_url: "https://wordpress.org/openverse/",
        provider: "provider",
      },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>
