import { Meta } from "@storybook/react";
import { AvatarProps } from "./AvatarProps";
import Avatar from "./Avatar";
const src =
  "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg";

export default {
  title: "Design System/Layout/Avatar",
  component: Avatar,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The Avatar component is typically used to display images, icons, or initials representing people or other entities. \n\n```javascript\nimport { Avatar } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    id: {
      control: { type: "text" },
      description: "Sets the id of the Avatar.",
    },
    border: {
      control: { type: "boolean" },
      description: "Sets a border to the Avatar.",
    },
    children: {
      control: { type: "text" },
      description: "Sets the Avatar children elements.",
    },
    className: {
      control: { type: "text" },
      description: "Add additional classes to the Avatar.",
    },
    fillMode: {
      control: { type: "select", options: ["null", "outline", "solid"] },
      description: "Configures the fillMode of the Button.",
    },
    rounded: {
      control: {
        type: "select",
        options: ["null", "small", "medium", "full", "large"],
      },
      description: "Configures the roundness of the Button.",
    },
    size: {
      control: {
        type: "select",
        options: ["null", "small", "medium", "large"],
      },
      description: "Configures the size of the Button.",
    },
    style: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the Avatar.",
    },
    themeColor: {
      control: {
        type: "select",
        options: [
          "null",
          "error",
          "inverse",
          "base",
          "success",
          "dark",
          "light",
          "primary",
          "secondary",
          "tertiary",
          "info",
          "warning",
        ],
      },
      description: "Configures the themeColor of the Button.",
    },
    type: {
      control: { type: "text" },
      description: "Set the type of the Avatar.",
    },
  },
} as Meta;

export const Default = (args: AvatarProps): JSX.Element => {
  return (
    <Avatar {...args}>
      <img src={src} alt="KendoReact Avatar Customer Image" />
    </Avatar>
  );
};

Default.args = {
  dataTestId: "avatar-data-testid",
  type: "image",
  border: false,
  rounded: "full",
  size: "large",
  id: "avatar-data-testid",
};