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

interface StoryProps extends BoxProps {
  title?: string;
  deprecated?: boolean;
}

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

    {children}
  </Box>
);

export default Story;