import { CConfirmActionModal, CButton } from "../components";
import "./utils.css";

export default {
  title: "CConfirmActionModal",
  component: CConfirmActionModal,
  subcomponents: { CButton },
  argTypes: {
    actionOneType: {
      control: {
        type: "select",
        options: [
          "primary",
          "secondary",
          "white",
          "danger",
          "success",
          "tertiary",
          "secondary-gray",
          "light-red",
          "dark-blue",
        ],
      },
    },
    actionTwoType: {
      control: {
        type: "select",
        options: [
          "primary",
          "secondary",
          "white",
          "danger",
          "success",
          "tertiary",
          "secondary-gray",
          "light-red",
          "dark-blue",
        ],
      },
    },
  },
};

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

export const Default = Template.bind({});
Default.args = {
  title: "Are you sure?",
  message: "This action cannot be undone.",
  actionOneLabel: "Cancel",
  actionTwoLabel: "Confirm",
  actionOneType: "white",
  actionTwoType: "danger",
  loadButton: false,
  isTextAreaEnabled: false,
};
