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

export default {
  title: "CAvatarGroup",
  component: CAvatarGroup,
  argTypes: {
    size: {
      control: {
        type: "select",
        options: ["extrasmall", "small", "medium", "large", "very large"],
      },
    },
    images: String,
    rounded: Boolean,
    name: String,
    description: String,
  },
};

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

export const Default = Template.bind({});
Default.args = {
  size: "medium",
  rounded: true,
  name: "+10",
  // images: [
  //   {
  //     image:
  //       "https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixqx=ukDMP4XEnx&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
  //   },
  //   {
  //     image:
  //       "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
  //   },
  //   {
  //     image:
  //       "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixqx=ukDMP4XEnx&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80",
  //   },
  //   {
  //     image:
  //       "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixqx=ukDMP4XEnx&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
  //   },
  // ],
  nameInitials: [
    {
      batch_id: 22,
      initials: "AS",
      firstName: "Ava",
      surname: "Smith",
      image: 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
    },
    {
      batch_id: 56,
      initials: "E",
      firstName: "Eva",
      surname: null,
      image: null
    },
    {
      batch_id: 88,
      initials: "I",
      firstName: "Ivan",
      surname: null,
      image_240: 'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixqx=ukDMP4XEnx&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
    },
    {
      batch_id: 77,
      initials: "PL",
      firstName: "Paul",
      surname: "Lopez",
      image_240: null
    },
    {
      batch_id: 22,
      initials: "AS",
      firstName: "Ava",
      surname: "Smith",
      image: null
    },
    {
      batch_id: 56,
      initials: "ER",
      firstName: "Eva",
      surname: "Ramos",
      image: null
    },
    {
      batch_id: 88,
      initials: "IO",
      firstName: "Ivan",
      surname: "Oliveira",
      image_240: null
    },
    {
      batch_id: 77,
      initials: "PL",
      firstName: "Paul",
      surname: "Lopez",
      image: null
    },
    {
      batch_id: 22,
      initials: "AS",
      firstName: "Ava",
      surname: "Smith",
      image: 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
    },
    {
      batch_id: 56,
      initials: "E",
      firstName: "Eva",
      surname: null,
      image_240: null
    },
    {
      batch_id: 88,
      initials: "I",
      firstName: "Ivan",
      surname: null,
      image: null
    },
    {
      batch_id: 77,
      initials: "PL",
      firstName: "Paul",
      surname: "Lopez",
      image_240: null
    },
  ],
};
