import React from 'react';
import type { KanbanColumn, ResearchDensityMode } from '../../../types/research';
import { NoteCard } from '../primitives/NoteCard';

interface ResearchKanbanProps {
  columns: KanbanColumn[];
  density: ResearchDensityMode;
  selectedNoteIds: string[];
  onSelectNote: (noteId: string) => void;
}

export const ResearchKanban: React.FC<ResearchKanbanProps> = ({
  columns,
  density,
  selectedNoteIds,
  onSelectNote,
}) => (
  <div className="flex min-h-0 gap-4 overflow-x-auto pb-4">
    {columns.map((column) => (
      <section
        key={column.key}
        className="flex w-[320px] shrink-0 flex-col rounded-3xl border border-[#1d2430] bg-[#0f141b]"
      >
        <header className="sticky top-0 z-10 rounded-t-3xl border-b border-[#1d2430] bg-[#111822] px-4 py-4">
          <div className="text-[10px] uppercase tracking-[0.2em] text-[#7e93ab]">{column.label}</div>
          <div className="mt-1 text-sm text-[#dcecff]">{column.notes.length} notes</div>
        </header>
        <div className="flex-1 space-y-3 p-4">
          {column.notes.map((note) => (
            <NoteCard
              key={note.id}
              note={note}
              density={density}
              isSelected={selectedNoteIds.includes(note.id)}
              onSelect={() => onSelectNote(note.id)}
            />
          ))}
        </div>
      </section>
    ))}
  </div>
);
