import React from "react";
import cn from "classnames";
import { Box, BoxProps } from "../Box";

type BackgroundType = "none" | "white";
type BorderPosition = "none" | "all" | "top" | "right" | "bottom" | "left";

export interface PanelProps extends BoxProps {
  background?: BackgroundType;
  border?: BorderPosition;
}

export const Panel = (props: PanelProps) => {
  const { background = "white", border = "all", className, ...rest } = props;

  const bgCn = () =>
    ({
      none: null,
      white: "bg-white",
    }[background]);

  const borderCn = () => {
    const borderColorCn = border !== "none" ? "border-gray-400" : null;
    const borderPositionCn = {
      none: null,
      all: "border",
      top: "border-t",
      bottom: "border-b",
      left: "border-l",
      right: "border-r",
    };

    return cn(borderColorCn, borderPositionCn[border]);
  };

  return <Box {...rest} className={cn(bgCn(), borderCn(), className)} />;
};