import Link from 'next/link';
import { formatDate, getArticles } from '../lib/articles';

export default function HomePage() {
  const articles = getArticles();

  return (
    <main>
      <section className="site-hero">
        <div className="site-hero__inner">
          <p className="eyebrow">Личный блог программиста</p>
          <h1>ProgCode.Ru</h1>
          <p className="site-description">
            PHP, Bitrix, JavaScript, D, Windows и практические заметки из ежедневной разработки.
          </p>
        </div>
      </section>

      <section className="articles-shell" aria-label="Список статей">
        <div className="articles-header">
          <div>
            <p className="eyebrow">Материалы</p>
            <h2>Статьи</h2>
          </div>
          <span>{articles.length} записей</span>
        </div>

        <div className="article-grid">
          {articles.map((article) => (
            <Link key={article.slug} className="article-card" href={`/articles/${encodeURIComponent(article.slug)}/`}>
              <img src={article.cover} alt="" />
              <div className="article-card__body">
                <div className="meta-line">
                  <time dateTime={article.date}>{formatDate(article.date)}</time>
                  <span>{article.readingMinutes} мин</span>
                </div>
                <h3>{article.title}</h3>
                <p>{article.excerpt}</p>
                <div className="tag-list">
                  {article.categories.map((category) => (
                    <span key={category}>{category}</span>
                  ))}
                </div>
              </div>
            </Link>
          ))}
        </div>
      </section>
    </main>
  );
}