import React from 'react';
import { ArrowLeftIcon } from 'lucide-react';
import { Reveal } from '../Reveal';
import { ButtonLink } from '../Button';
import { ArticleCard } from '../ArticleCard';
import { useSite } from '../../api';

export function Articles() {
  const { articles } = useSite();
  return (
    <section className="bg-char py-24 lg:py-32" aria-labelledby="articles-title">
      <div className="mx-auto max-w-site px-6 lg:px-10">
        <Reveal className="max-w-2xl text-right">
          <p className="text-sm font-light text-copper">وبلاگ</p>
          <h2 id="articles-title" className="mt-5 text-section font-bold text-ivory">
            آخرین مقالات
          </h2>
          <p className="mt-5 text-base font-light leading-9 text-ivory/60">
            یادداشت‌های تیم معماری، اجرا و سرمایه‌گذاری گروه ساختمانی آرامش درباره آنچه در کارگاه و بازار می‌گذرد.
          </p>
          <div className="mt-6 h-px w-24 bg-copper/70" />
        </Reveal>

        <div className="mt-14 grid gap-6 lg:grid-cols-3">
          {articles.slice(0, 3).map((article, i) =>
          <Reveal key={article.slug} delay={0.06 * i} className="h-full">
              <ArticleCard article={article} />
            </Reveal>
          )}
        </div>

        <Reveal delay={0.1}>
          <div className="mt-12 flex justify-center">
            <ButtonLink to="/blog" variant="outline" className="font-light">
              همه مقالات
              <ArrowLeftIcon className="h-4 w-4" />
            </ButtonLink>
          </div>
        </Reveal>
      </div>
    </section>);

}