import React from "react";
import classNames from "classnames";
import { Box, BoxProps } from "../Box";
import { Flex } from "../Flex";
import { bem } from "../../utilities/bem";

const cn = "Paper";

const Paper = ({ className, ...rest }: BoxProps) => (
  <Box className={classNames(bem(cn), className)} {...rest} />
);

const Toolbar = ({ className, ...rest }: BoxProps) => (
  <Flex
    className={classNames(bem(cn, { e: "toolbar" }), className)}
    {...rest}
  />
);

const Content = ({ className, ...rest }: BoxProps) => (
  <Box className={classNames(bem(cn, { e: "content" }), className)} {...rest} />
);

Paper.Toolbar = Toolbar;
Paper.Content = Content;

export { Paper };