import { Canvas, Controls, Meta, Subtitle, Title } from "@storybook/blocks";
import { Stack, Tooltip } from "../../../components";
import TrafficLight from "react-trafficlight";

import * as BoxStories from "./Box.stories";

<Meta of={BoxStories} />

<Stack className="docs-header">
  <Title />
  <Tooltip anchor="bottom" text="Ready to be used in production!">
    <TrafficLight GreenOn />
  </Tooltip>
</Stack>
<Subtitle>A supercharged "animation-ready" div replacement!</Subtitle>

<br />

<Canvas of={BoxStories.PlainBox} />

## Props

<Controls
  exclude={['className']}

/>

<br />

## Stories

<br />

### Plain Box

<Canvas of={BoxStories.PlainBox} sourceState="shown" />
### Animated Box
<Canvas of={BoxStories.AnimatedBox} sourceState="shown" />
### ScrollTrigger
<Canvas of={BoxStories.ScrollTrigger} sourceState="shown" />
### Section
<Canvas of={BoxStories.Section} sourceState="shown" />
### Header
<Canvas of={BoxStories.Header} sourceState="shown" />
### Footer
<Canvas of={BoxStories.Footer} sourceState="shown" />
