import React from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";
import { ThemeProviderWithStyledEngine, Avatar } from "../index";

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Data Display/Avatar",
  component: Avatar,
  argTypes: {
    src: {
      table: {
        disable: true,
      },
    },
    avatarBorder: {
      table: {
        disable: true,
      },
    },
  },
  decorators: [decorator],
} satisfies Meta<typeof Avatar>;

export default meta;

const Template: StoryFn<typeof Avatar> = ({ id, size, name, ...restProps }) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-around",
        width: 200,
        padding: 5,
      }}
    >
      <Avatar
        name={name}
        id={id}
        size={size}
        src="https://placekitten.com/256/256?image=3"
        {...restProps}
      />

      <Avatar name={name} size={size} id={id} {...restProps} />
    </div>
  );
};

export const Default: StoryFn<typeof Avatar> = Template.bind({});

Default.args = {
  name: "Example Name",
  id: "Example@gmail.com",
  size: 24,
};
