import React, { useEffect, useState } from 'react';
import BlogSidebar from '../components/BlogSidebar.jsx';
import MarkdownRenderer from '../components/MarkdownRenderer.jsx';
import { getPublicSettings } from '../api/settings.js';

/**
 * 首页（迁移自 index.html 的内联 HOMEPAGE）：
 * 侧栏（头像/简介/联系方式 + 最新文章）+ 主页内容（settings.homepage_content，Markdown）。
 */
export default function Home() {
  const [settings, setSettings] = useState({});
  const [contentError, setContentError] = useState(false);

  useEffect(() => {
    getPublicSettings()
      .then((s) => { setSettings(s); setContentError(false); })
      .catch(() => { setSettings({}); setContentError(true); });
  }, []);

  return (
    <div className="homepage-layout">
      <h1 className="sr-only">首页</h1>
      <BlogSidebar settings={settings} showRecent forceShow />
      <div className="homepage-content">
        <div className="card">
          {contentError
            ? <p style={{ color: 'var(--md-ref-on-surface-variant)' }}>内容加载失败</p>
            : <MarkdownRenderer content={settings.homepage_content || ''} useMarkdown />}
        </div>
      </div>
    </div>
  );
}