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

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

  const gridItemWidth = useMemo(() => {
    switch (cardSettings?.cardSize) {
      case "small":
        return cardSizesVertical.small;
      case "large":
        return cardSizesVertical.large;
      case "medium":
        return cardSizesVertical.medium;
      default:
        return cardSizesVertical.small;
    }
  }, [cardSettings?.cardSize]);

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

export default Board;
