import React from 'react';
import { AsyncThunk } from '@reduxjs/toolkit';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import KanbanColumn from './KanbanColumn';

type Props = {
  columns: Array<{ id: string; label: string }>;
  filtersQuery: string;
  entityName: string;
  columnFieldName: string;
  showFieldName: string;
  deleteThunk: AsyncThunk<any, any, any>;
  updateThunk: AsyncThunk<any, any, any>;
};

const KanbanBoard = ({
  columns,
  entityName,
  columnFieldName,
  filtersQuery,
  showFieldName,
  deleteThunk,
  updateThunk,
}: Props) => {
  return (
    <DndProvider backend={HTML5Backend}>
      <div className='rounded-2xl border border-gray-200/80 bg-white/70 p-2 shadow-sm dark:border-dark-700 dark:bg-dark-800/70'>
        <div className='flex min-h-[420px] flex-1 gap-4 overflow-x-auto overflow-y-hidden pb-2'>
          {columns.map((column) => (
            <KanbanColumn
              key={column.id}
              entityName={entityName}
              columnFieldName={columnFieldName}
              showFieldName={showFieldName}
              column={column}
              filtersQuery={filtersQuery}
              deleteThunk={deleteThunk}
              updateThunk={updateThunk}
            />
          ))}
        </div>
      </div>
    </DndProvider>
  );
};

export default KanbanBoard;
