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

export default {
  title: "CStats",
  component: CStats,
  argTypes: {
    statsCount: { control: { type: "object" } },
  },
};

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

export const Default = Template.bind({});
Default.args = {
  statsCount: [
    {
      label: "Invoiced",
      totalCount: "52145",
      number: 4,
      icon: { name: "check", type: "solid", class: "h-5 w-5" },
      tag: {
        label: "+10",
        color: "green",
        icon: {
          name: "arrow-down-solid-v2",
          type: "solid",
          class: "h-5 w-5 text-green-500",
          viewBox: "0 0 24 24",
        },
      },
      days: "Last 7 days",
      icon: {
        name: "information-circle",
        type: "solid",
        class: "h-5 w-5 shrink-0 text-gray-400 hover:text-gray-500",
        cursorType: "cursor-pointer",
      },
      toolTip: {
        showToolTip: true,
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        classes: "bottom-6",
      },
    },
    { label: "Partially paid", totalCount: "66145", number: 2 },
    { label: "Paid", totalCount: "88845", number: 4 },
    // { label: "Overdue", totalCount: "$14545", number: 2 },
  ],
};
