import CAvatar from "../components/CAvatar/CAvatar.vue";
import "./utils.css";

export default {
  title: "CAvatar",
  component: CAvatar,
  argTypes: {
    size: {
      control: {
        type: "select",
        options: ["extraextraextrasmall", "extraextrasmall", "extrasmall", "small", "medium", "large", "very large"],
      },
    },
    image: String,
    rounded: Boolean,
    name: String,
    description: String,
    nameInitials: String,
    imageClasses: String,
  },
};

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { CAvatar },
  template: '<c-avatar v-bind="$props" />',
});

export const Default = Template.bind({});
Default.args = {
  size: "medium",
  rounded: true,
  image:
    "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
  name: "Alkama",
  // nameInitials: "SA",
  imageClasses: "object-contain",
};
