import React from "react";
import { PositiveNegativeProgressBar } from "../../components/Common";

export default {
  title: "Common/Positive Negative Bar ",
  component: PositiveNegativeProgressBar,
  parameters: { controls: { exclude: "direction" } },
  argTypes: {
    resultValue: {
      control: { type: "number" },
    },
  },
};

const Template = (args) => <PositiveNegativeProgressBar {...args} />;

export const Horizontal = Template.bind({});
Horizontal.args = {
  direction: "horizontal",
  label: "Sample horizontal progress bar",
  negativeValue: 30,
  positiveValue: 70,
  resultValue: 10,
  resultColor: "black",
  height: "14px",
  width: "100%",
  showPercentageValue: false,
};

export const Vertical = Template.bind({});
Vertical.args = {
  direction: "vertical",
  label: "SAMP",
  labelHeight: "48px",
  negativeValue: 30,
  positiveValue: 70,
  resultValue: 10,
  height: "300px",
  width: "14px",
  showPercentageValue: false,
};