/**
 * Document Browser App - Browse and manage documents
 */

import React, { useState } from 'react';

export function DocumentBrowser({ vaultId }: { vaultId?: number }) {
  const [documents] = useState([
    { id: 1, title: 'Brand Guidelines', updated_at: '2024-01-15', creator: 'Alice' },
    { id: 2, title: 'Technical Specifications', updated_at: '2024-01-12', creator: 'Bob' },
    { id: 3, title: 'Content Strategy', updated_at: '2024-01-10', creator: 'Charlie' },
  ]);

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
        <h1 style={{ fontSize: '24px', margin: 0 }}>Documents</h1>
        <button style={{ padding: '10px 20px', background: '#1d8cf8', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          New Document
        </button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
        {documents.map(doc => (
          <div key={doc.id} style={{ 
            display: 'flex', 
            alignItems: 'center', 
            padding: '16px', 
            border: '1px solid #ddd', 
            borderRadius: '6px', 
            background: 'white',
            cursor: 'pointer',
            transition: 'background 0.2s'
          }}
          onMouseEnter={(e) => (e.currentTarget as HTMLDivElement).style.background = '#f9f9f9'}
          onMouseLeave={(e) => (e.currentTarget as HTMLDivElement).style.background = 'white'}
          >
            <div style={{ fontSize: '32px', marginRight: '16px' }}>📄</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>{doc.title}</div>
              <div style={{ fontSize: '12px', color: '#999' }}>
                Updated {doc.updated_at} by {doc.creator}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
