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

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

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

export const Default = Template.bind({});
Default.args = {
  items: [
    {
      icon: false,
      text: "English",
      class: "w-44",
    },
    { text: "Arabic" },
  ],
  dropdownIcons: [
    {
      name: "trash",
      class: "mr-3 h-5 w-5 text-gray-400 hover:text-red-500",
      type: "solid",
    },
  ],
  icon: {
    name: "language-outline-v2",
    class: "h-5 w-5 text-gray-400",
    type: "outline-v2",
  },
  selectedOption: "English",
};
