import React from 'react';

import { ComponentMeta, ComponentStory } from '@storybook/react';

import {
  SVGBookmark
} from "./icons";


type Props = {
  item: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
}& React.SVGProps<SVGSVGElement>;

const Icon = ({item, ...props}: Props) => {
  const Item = item;
  return <span><Item {...props} /></span>
}

export default {
  // Title inside navigation bar
  title: 'Icons',
  // Component to test
  component: Icon,
  // Specify subcomponents to be able to work with
  // nested structure,
} as ComponentMeta<typeof Icon>;


const Template: ComponentStory<typeof Icon> = (args) => (
  <Icon {...args} />
);

export const Bookmark = Template.bind({});
Bookmark.args = {
  item: SVGBookmark,
  className: "fill-blue-500"
};