import React from 'react';
import Avatar from '../components/parts/Avatar';
import { UseState } from './helpers'
import Wrap from './Wrap';
import Flex from '../components/layout/Flex';
import Knobs from './Knobs';

export default {
  title: 'Avatar',
};

export const Sizes = () =>
  <UseState
      initialValue={true}
      render={(border, setBorder) => (
        <Wrap>
          <Flex gap="medium" pad="medium" direction="vertical">
          <Knobs
              title="Show Border"
              currentValue={border}
              knobs={[
                  {
                      name: "True",
                      value: true,
                      setKnob: value => setBorder(true)
                  },
                  {
                      name: "False",
                      value: false,
                      setKnob: value => setBorder(false)
                  }
              ]}
          />

          <Flex gap="medium" pad="medium">
            <Avatar border={border} size="small" url="https://i.pinimg.com/originals/6c/73/2f/6c732f0e780a22e35965a75ee1b8b06c.jpg"/>
            <Avatar border={border} size="medium" url="https://i.pinimg.com/originals/6c/73/2f/6c732f0e780a22e35965a75ee1b8b06c.jpg"/>
            <Avatar border={border} size="large" url="https://i.pinimg.com/originals/6c/73/2f/6c732f0e780a22e35965a75ee1b8b06c.jpg"/>
          </Flex>
          </Flex>
        </Wrap>
      )}
  />