import React from "react";
import classNames from "classnames";
import { Box, BoxProps } from "../components/Box";
import { Heading } from "../components/Heading";

interface StoryProps extends BoxProps {
  title?: string;
}

const Story = ({ className, title, children }: StoryProps) => (
  <Box className={classNames("p-6 relative", className)}>
    {title && <Heading.H1 className="mb-6">{title}</Heading.H1>}

    {children}
  </Box>
);

export default Story;