import React from "react";
import type { ComponentProps } from "react";
import { View } from "react-native";
import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import { Glimmer } from "@jobber/components-native";
import { GlimmerBasic, GlimmerInDepth } from "./docs";

const meta = {
  title: "Components/Status and Feedback/Glimmer",
  component: Glimmer,
  parameters: {
    viewport: { defaultViewport: "mobile1" },
    showNativeOnWebDisclaimer: true,
  },
  decorators: [
    // Take out Storybook's wrapper layout to preserve native glimmer shapes.
    (Story: React.ComponentType) => (
      <View>
        <Story />
      </View>
    ),
  ],
} satisfies Meta<typeof Glimmer>;
export default meta;
type Story = StoryObj<Partial<ComponentProps<typeof Glimmer>>>;

export const Basic: Story = {
  render: GlimmerBasic,
  args: {
    shape: "rectangle",
    size: "base",
    timing: "base",
  },
};

export const InDepth: Story = {
  render: GlimmerInDepth,
  args: {
    size: "larger",
    shape: "circle",
  },
};