import Avatar from "@components/Avatar/Avatar";
import type { Meta, StoryObj } from "@storybook/react";

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta = {
  title: "Example/TextAvatar",
  component: Avatar,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
    layout: "centered",
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
  tags: ["autodocs"],
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {

  },
} satisfies Meta<typeof Avatar>;

export default meta;

type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Default: Story = {
  args: {
    label: 'Amce Inc',
    onClickAvatar: (arg) => {},
  },
};

export const medium: Story = {
  args: {
    label: 'Amce Inc',
    onClickAvatar: (arg) => {},
    style: {height:24, width: 24, fontSize: 12}
  },
};

export const small: Story = {
  args: {
    label: 'Amce Inc',
    onClickAvatar: (arg) => {},
    style: {height:16, width: 16, fontSize: 8}
  },
};

export const large: Story = {
  args: {
    label: 'Amce Inc',
    onClickAvatar: (arg) => {},
    style: {height:48, width: 48}
  },
};

export const Rounded: Story = {
  args: {
    label: 'Amce Inc',
    variant: 'rounded'
  },
};

export const Square: Story = {
  args: {
    label: 'Amce Inc',
    variant: 'square'
  },
};