import React from 'react';
import KanbanBoardCss from './kanban-board.module.css';
import { IBoardStore } from './store';
import { observer } from 'mobx-react-lite';
import Column from './column';

export type Props = {
  store: IBoardStore;
};

export const KanbanBoard = observer((props: Props) => {
  let title: any;
  if (props.store.metainfo.url) {
    title = <a href={props.store.metainfo.url}>{props.store.metainfo.title}</a>;
  } else {
    title = <>{props.store.metainfo.title}</>;
  }
  const columns = [];
  for (let i = 0; i < props.store.data.length; i++) {
    const column = props.store.data[i];
    columns.push(<Column store={column} />);
  }
  return (
    <>
      <h1 id={props.store.metainfo.title}>
        {title} <a href={`#${props.store.metainfo.title}`}>#</a>
      </h1>
      <div className={KanbanBoardCss.kanbanContainer}>{columns}</div>
    </>
  );
});

export default KanbanBoard;
