import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
import { select, text } from '@storybook/addon-knobs';
import ChecAvatar from '../../components/ChecAvatar.vue';

<Meta title="Components/Avatar" component={ChecAvatar} />

# Avatar Component

<Props of={ChecAvatar} />

# Default

<Preview>
  <Story name="Default">
    {{
      components: {
        ChecAvatar
      },
      props: {
        variant: {
          default: select('Size', ['sm', 'md', 'lg'], 'sm'),
        },
        image: {
          default: text('Image URL', ''),
        },
      },
      template: `
        <div class="p-16 flex justify-center w-full bg-gray-100">
          <ChecAvatar
            :variant="variant"
            :image="image"
          />
        </div>`
    }}
  </Story>
</Preview>

<Preview>
  <Story name="With Image">
    {{
      components: {
        ChecAvatar
      },
      props: {
        variant: {
          default: select('Size', ['sm', 'md', 'lg'], 'lg'),
        },
        image: {
          default: text('Image URL', 'https://www.fillmurray.com/400/400'),
        },
      },
      template: `
        <div class="p-16 flex justify-center w-full bg-gray-100">
          <ChecAvatar
            :variant="variant"
            :image="image"
          />
        </div>`
    }}
  </Story>
</Preview>

<Preview>
  <Story name="With aspect-ratio 1:1 size">
    {{
      components: {
        ChecAvatar
      },
      props: {
        image: {
          default: text('Image URL', 'https://www.fillmurray.com/400/400'),
        },
      },
      template: `
        <div class="p-16 bg-gray-100">
          <div class="max-w-xs">
            <ChecAvatar
              :image="image"
            />
          </div>
          <div class="max-w-md">
            <ChecAvatar
              :image="image"
            />
          </div>
          <div class="max-w-lg">
            <ChecAvatar
              :image="image"
            />
          </div>
        </div>`
    }}
  </Story>
</Preview>