import type { ComponentProps } from "react";
import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import { Text } from "@jobber/components-native";
import {
  TextBasic,
  TextMultiLevelNesting,
  TextNestedBold,
  TextNestedMixedStyles,
} from "./docs";

type TextStoryArgs = Pick<
  ComponentProps<typeof Text>,
  "children" | "level" | "reverseTheme"
>;

const meta = {
  title: "Components/Text and Typography/Text",
  component: Text,
  parameters: {
    viewport: { defaultViewport: "mobile1" },
    showNativeOnWebDisclaimer: true,
  },
} satisfies Meta<typeof Text>;

export default meta;

type Story = StoryObj<TextStoryArgs>;

export const Basic: Story = {
  render: TextBasic,
  args: {
    children:
      '"640K is more memory than anyone will ever need on a computer" - Not Bill Gates',
  },
};

export const SupportingText: Story = {
  render: TextBasic,
  args: {
    children:
      "Supporting Text should be used to supplement additional, more important content",
    level: "textSupporting",
  },
};

export const ReverseTheme: Story = {
  render: TextBasic,
  args: {
    children: "Changes Text color for display on a dark background",
    reverseTheme: true,
  },
  parameters: {
    backgrounds: { default: "dark" },
  },
};

export const NestedBold: Story = {
  render: TextNestedBold,
};

export const NestedMixedStyles: Story = {
  render: TextNestedMixedStyles,
};

export const MultiLevelNesting: Story = {
  render: TextMultiLevelNesting,
};