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

export default {
  title: "CPhoneNumber",
  component: CPhoneNumber,
  argTypes: {
    label: String,
    color: {
      control: {
        type: "select",
        options: ["gray", "red", "yellow", "green", "indigo", "purple", "pink"],
      },
    },
    countryDropdownListPosition: {
      control: {
        type: "select",
        options: ["left", "right"],
      },
    },
  },
};

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

export const Default = Template.bind({});
Default.args = {
  label: "Active",
  color: "green",
  phone: "+3197010281349",
  disabled: false,
  countryDropdownListPosition: "left",
};
