import CIconDropdown from "../components/CIconDropdown/CIconDropdown.vue";
import CIcon from "../components/CIcon/CIcon.vue";
import "./utils.css";

export default {
  title: "CIconDropdown",
  component: CIconDropdown,
  subcomponents: { CIcon },
  argTypes: {
    items: { control: { type: "object" } },
    icon: Object,
    dropdownIcons: { type: Array },
  },
};

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

export const Default = Template.bind({});
Default.args = {
  items: [
    {
      icon: true,
      text: "one",
      action: "alert",
      class: "hover:bg-red-100 hover:text-red-500 w-56",
      disabled: true
    },
    {
      text: "two",
      isLoading: true,
    },
  ],
  dropdownIcons: [
    {
      name: "trash",
      class: "mr-3 h-5 w-5 text-gray-400 hover:text-red-500",
      type: "solid",
    },
    {
      class: "mr-3 h-5 w-5 text-gray-400 hover:text-red-500",
    },
  ],
  icon: {
    name: "dots-vertical-solid",
    class: "h-5 w-5 text-gray-400",
    type: "solid",
  },
};
