import React from 'react';
import { Document } from '../../../shared/types';

interface Props {
  documents: Document[];
  onSelect: (doc: Document) => void;
  selectedId: string | null;
}

export function DocumentList({ documents, onSelect, selectedId }: Props) {
  if (documents.length === 0) {
    return (
      <div style={{ padding: '20px 16px', color: '#666', fontSize: '13px', textAlign: 'center' }}>
        No documents imported yet.
        <br />
        <span style={{ fontSize: '11px', color: '#555' }}>
          Import documents to get started.
        </span>
      </div>
    );
  }

  return (
    <div style={{ flex: 1, overflow: 'auto' }}>
      {documents.map(doc => (
        <div
          key={doc.id}
          onClick={() => onSelect(doc)}
          style={{
            padding: '10px 16px',
            cursor: 'pointer',
            borderBottom: '1px solid #0f3460',
            background: selectedId === doc.id ? '#0f3460' : 'transparent',
            transition: 'background 0.15s',
          }}
        >
          <div style={{ fontSize: '13px', fontWeight: 500 }}>{doc.title}</div>
          <div style={{ fontSize: '11px', color: '#888', marginTop: '2px' }}>
            {doc.status === 'indexed' ? '✓ ' : ''}
            {(doc.size / 1024).toFixed(1)} KB
          </div>
        </div>
      ))}
    </div>
  );
}