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

export default {
  title: "CTabs",
  component: CTabs,
  subcomponents: { CIcon },
  argTypes: {
    tabs: { control: { type: "object" } },
    initialTab: String,
    classes: String,
  },
};

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { CTabs },
  template:
    '<c-tabs v-bind="$props"><template slot="tab-panel-url">url panel</template><template slot="tab-panel-mobile-app">app panel</template><template slot="tab-panel-preferences">preferences panel</template></c-tabs>',
});

export const Default = Template.bind({});
Default.args = {
  tabs: [
    { name: "url", text: "Booking URL", count: 10 },
    { name: "mobile-app", text: "Mobile app" },
    { name: "preferences", text: "Preferences" },
    { name: "private", text: "Private classes", count: 5 },
    { name: "subpages", text: "Subpages" },
    { name: "marketing", text: "Marketing" },
    { name: "design", text: "Design" },
    { name: "productandtechsupport", text: "Product and Tech Support" },
  ],
  initialTab: "url",
};
