import { FaBook, FaCircleQuestion, FaKeyboard } from 'react-icons/fa6'

export default function DocsPage() {
  const sections = [
    {
      icon: FaBook,
      title: 'Getting Started',
      content: 'Learn how to create and manage work orders in WOMS 2.0.'
    },
    {
      icon: FaCircleQuestion,
      title: 'FAQ',
      content: 'Frequently asked questions about the system.'
    },
    {
      icon: FaKeyboard,
      title: 'Keyboard Shortcuts',
      content: 'Speed up your workflow with keyboard shortcuts.'
    }
  ]

  const shortcuts = [
    { key: 'N', action: 'New Ticket' },
    { key: 'F', action: 'Focus Search' },
    { key: 'R', action: 'Refresh List' },
    { key: 'Esc', action: 'Close Modal' }
  ]

  return (
    <div className="main-content">
      <header className="text-center mb-2">
        <h2>Documentation</h2>
      </header>

      <div className="docs-grid">
        {sections.map(({ icon: Icon, title, content }) => (
          <div key={title} className="doc-card">
            <Icon size={32} className="text-teal" />
            <h4>{title}</h4>
            <p className="text-grey">{content}</p>
          </div>
        ))}
      </div>

      <div className="shortcuts-section mt-4">
        <h3 className="text-center">Keyboard Shortcuts</h3>
        <table className="table" style={{ maxWidth: '400px', margin: '0 auto' }}>
          <thead>
            <tr>
              <th>Key</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {shortcuts.map(({ key, action }) => (
              <tr key={key}>
                <td><kbd>{key}</kbd></td>
                <td>{action}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}
