import * as React from "react";

import Caption from "./Caption";

export default {
  title: "Modules|Properties/Individual Properties/Caption",
  component: Caption,
  excludeStories: /.*Data$/,
};

export const Default: any = () => {
  const [caption, setCaption] = React.useState("This is a test!");

  return (
    <>
      <div
        style={{
          margin: "30px auto",
          background: "yellow",
          border: "5px solid green",
          color: "red",
          fontWeight: "bold",
          fontFamily: "Roboto",
          textAlign: "center",
          padding: 100,
          fontSize: "36pt",
        }}
      >
        {caption}
      </div>

      <Caption
        text="Caption Title"
        onChange={(value) => {
          console.log("Caption Changed", value);
          setCaption(value);
        }}
        value={caption}
      />
    </>
  );
};

Default.story = {
  parameters: {
    jest: ["Height"],
  },
};