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-3 overflow-x-auto pb-4 sm:gap-4">
    {columns.map((column) => (
      <section
        key={column.key}
        className="flex w-[280px] shrink-0 flex-col rounded-2xl border border-term-border bg-term-surface sm:w-[320px] sm:rounded-3xl"
      >
        <header className="sticky top-0 z-10 rounded-t-2xl border-b border-term-border bg-term-bg px-3 py-3 sm:rounded-t-3xl sm:px-4 sm:py-4">
          <div className="text-[10px] uppercase tracking-[0.2em] text-term-text-tertiary">
            {column.label}
          </div>
          <div className="mt-1 text-sm text-term-text">{column.notes.length} notes</div>
        </header>
        <div className="flex-1 space-y-3 p-3 sm: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>
);
