import React, { ReactNode } from "react";
import { bemHOF } from "../../utilities/bem";
import { Box } from "../Box";
import { Grid } from "../Grid";

const cn = bemHOF("Frame");

type FrameAreaName = "appbar" | "topbar" | "main" | "bottombar";

interface FrameProps {
  children: ReactNode;
}

interface FrameAreaProps {
  children: ReactNode;
  name: FrameAreaName;
}

export const FrameArea = ({ children, name }: FrameAreaProps) => (
  <Box className={cn({ e: name })}>{children}</Box>
);

export const Frame = ({ children }: FrameProps) => (
  <Grid className={cn()}>{children}</Grid>
);

Frame.Area = FrameArea;