import { Icons } from "../icons";
import { EllipsisRow } from ".";
import type { Meta, StoryObj } from "@storybook/react";

/**
 * EllipsisRow is a component that renders a row with a start text on the left end while the end text on the other end divided with ellipsis.
 */
const meta: Meta<typeof EllipsisRow> = {
  title: "EllipsisRow",
  component: EllipsisRow,
  tags: ["autodocs"],
  argTypes: {
    endDecoration: {
      control: false,
    },
    endTextUppercase: {
      control: { type: "boolean" },
    },
  },
  args: {
    startText: "Start text",
    endText: "End text",
    noOfDots: 300,
    endDecoration: <Icons.Copy color="$light-off-white" />,
    endTextUppercase: true,
  },
};

export default meta;

type Story = StoryObj<typeof EllipsisRow>;

export const Default: Story = {
  render: (args) => <EllipsisRow {...args} />,
};