import React from 'react'

interface WelcomeScreenProps {
  onOpen: () => void
  onNew: () => void
}

export function WelcomeScreen({ onOpen, onNew }: WelcomeScreenProps) {
  return (
    <div id="welcome-screen">
      <div className="welcome-content">
        <div className="welcome-icon">
          <svg width="80" height="80" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="5" width="80" height="90" rx="8" fill="#f0f6ff" stroke="#1a73e8" strokeWidth="2" />
            <text x="50" y="45" textAnchor="middle" fill="#1a73e8" fontFamily="system-ui" fontWeight="bold" fontSize="32">M↓</text>
            <text x="50" y="70" textAnchor="middle" fill="#5f6368" fontFamily="system-ui" fontSize="12">MarkLite</text>
          </svg>
        </div>
        <h1>欢迎使用 MarkLite</h1>
        <p>一款轻量级的 Markdown 阅读器</p>
        <div className="welcome-actions">
          <button className="welcome-btn primary" onClick={onOpen}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
            </svg>
            打开文件
          </button>
          <button className="welcome-btn secondary" onClick={onNew}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="12" y1="5" x2="12" y2="19" />
              <line x1="5" y1="12" x2="19" y2="12" />
            </svg>
            新建文件
          </button>
        </div>
        <div className="welcome-tips">
          <p>💡 提示：可以直接拖拽 .md 文件到窗口打开</p>
          <p>⌨️ 快捷键：Ctrl+O 打开 | Ctrl+S 保存 | Ctrl+F 搜索 | Ctrl+1/2/3 视图</p>
        </div>
      </div>
    </div>
  )
}