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;