import { BoardContainer } from "../index";
import { StyleHorizontal, StyleVertical } from "../styles/Base.js";
import { cardSizesVertical } from "../styles/Globals.js";

const Board = ({ orientation, cardSettings, ...additionalProps }) => {
  const OrientationStyle = orientation === "horizontal" ? StyleHorizontal : StyleVertical;

  let gridItemWidth;
  switch (cardSettings?.cardSize) {
    case "small":
      gridItemWidth = cardSizesVertical.small;
      break;
    case "large":
      gridItemWidth = cardSizesVertical.large;
      break;
    case "medium":
      gridItemWidth = cardSizesVertical.medium;
      break;
    default:
      gridItemWidth = cardSizesVertical.small;
  }

  return (
    <OrientationStyle {...{ gridItemWidth }}>
      <BoardContainer
        orientation={orientation}
        cardSettings={cardSettings}
        {...additionalProps}
        className="react-trello-board"
      />
    </OrientationStyle>
  );
};

export default Board;
