import React from "react";
import { Meta, Story } from "@storybook/react";
import { AtomLoading, ILoadingProps } from "native/atoms/Loading";
import { Text } from "react-native";

const meta: Meta = {
  title: "React Native/atoms/Loading",
  component: AtomLoading,
  argTypes: {},
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateLoading: Story<ILoadingProps> = (props) => {
  return (
    <>
      <Text>
        Note: To make it work on android, you need to add implementation
        'com.facebook.fresco:animated-gif:2.5.0' in build.gradle
      </Text>
      <AtomLoading {...props} />
    </>
  );
};

// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
// https://storybook.js.org/docs/react/workflows/unit-testing
export const Loading = TemplateLoading.bind({});

Loading.args = {
  width: "102px",
  height: "102px",
};
