import * as React from "react"
import { storiesOf } from "@storybook/react"
import { ThemeProvider } from "styled-components"
import { theme } from "../../../"
import { RibbonBadgeWithIcon } from "../components/RibbonBadge"

storiesOf("Badge", module)
  .addDecorator((story) => (
    <ThemeProvider theme={theme}>
      <div style={{ backgroundColor: "black", padding: 20 }}>{story()}</div>
    </ThemeProvider>
  ))
  .add("RibbonWithIcon", () => (
    <div style={{display: "flex"}}>
      <RibbonBadgeWithIcon name="jelly" label={"100 k"} />
      <RibbonBadgeWithIcon name="miniheart" label={"1.1 m"} />
      <RibbonBadgeWithIcon name="rating" label={"4.8"} />
      <RibbonBadgeWithIcon name="view" label={"100 k"} />
    </div>
  ))