import { useNotesStore } from "../../store/notesStore";
import NoteListItem from "./NoteListItem";

type NotesListProps = {
  onSelect?: () => void;
};

export default function NotesList({ onSelect }: NotesListProps) {
  const notes = useNotesStore((state) => state.notes);
  const activeId = useNotesStore((state) => state.activeId);
  const search = useNotesStore((state) => state.search.toLowerCase());
  const selectNote = useNotesStore((state) => state.selectNote);
  const removeById = useNotesStore((state) => state.removeById);

  const filtered = notes.filter((note) => note.title.toLowerCase().includes(search));

  return (
    <div className="mt-4 space-y-2 overflow-y-auto pb-6">
      {filtered.length === 0 && (
        <p className="text-sm text-[var(--muted)]">Not bulunamadi.</p>
      )}
      {filtered.map((note) => (
        <NoteListItem
          key={note.id}
          item={note}
          active={note.id === activeId}
          onClick={() => {
            selectNote(note.id);
            onSelect?.();
          }}
          onDelete={() => removeById(note.id)}
        />
      ))}
    </div>
  );
}
