import React from 'react';
import type { Notebook } from '@shared/types';

interface Props {
  notebooks: Notebook[];
  selectedId: string | null;
  onSelect: (id: string) => void;
  onCreate: () => void;
}

export function NotebookList({ notebooks, selectedId, onSelect, onCreate }: Props): React.ReactElement {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      {notebooks.map((nb) => {
        const active = nb.id === selectedId;
        return (
          <button
            key={nb.id}
            onClick={() => onSelect(nb.id)}
            style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', background: active ? '#eaf3ff' : 'transparent',
              border: 'none', cursor: 'pointer', textAlign: 'left',
              color: active ? '#0a4b80' : '#333', fontSize: 13
            }}
          >
            <span style={{
              width: 8, height: 8, borderRadius: '50%',
              background: nb.color ?? '#bbb', flexShrink: 0
            }} />
            <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {nb.name}
            </span>
            <span style={{ fontSize: 11, color: '#888' }}>{nb.noteCount}</span>
          </button>
        );
      })}
      <button
        onClick={onCreate}
        style={{
          padding: '6px 12px', background: 'transparent', border: 'none',
          cursor: 'pointer', textAlign: 'left', color: '#888', fontSize: 12
        }}
      >
        + 새 노트북
      </button>
    </div>
  );
}
