import React from 'react';
import ColumnCss from './column.module.css';
import * as Stores from './store';
import { observer } from 'mobx-react-lite';
import * as KanbanCard from './kanban-card';

export type Props = {
  store: Stores.IColumnStore;
};

export const Column = observer((props: Props) => {
  const cards = props.store.cards.map((card) => {
    return (
      <KanbanCard.KanbanCard
        store={card}
        key={card.issue.id}
      ></KanbanCard.KanbanCard>
    );
  });
  return (
    <div className={ColumnCss.kanbanColumn}>
      <div className={ColumnCss.kanbanHeader}>
        {props.store.status} ({props.store.count})
      </div>
      {cards}
    </div>
  );
});

export default Column;
