import React from 'react'
import { Link } from 'react-router-dom'
import { ArrowLeftIcon, ClockIcon } from 'lucide-react'
import { PageHero } from '../components/PageHero'
import { Reveal } from '../components/Reveal'
import { ArticleCard } from '../components/ArticleCard'
import { Newsletter } from '../components/home/Newsletter'
import { useSite } from '../api'
import { AddItemButton, EditableItem } from '../admin/Editable'

export function Blog() {
  const { articles } = useSite()
    const [featured, ...rest] = articles

  return (
    <>
      <PageHero pageKey="blog" />

      <section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
        <div className="mx-auto max-w-site px-6 lg:px-10">
          <Reveal>
            <EditableItem resource="articles" item={featured}>
            <Link
              to={`/blog/${featured.slug}`}
              className="group grid items-stretch border border-ivory/10 bg-char transition-[transform,box-shadow,border-color] duration-300 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift lg:grid-cols-2"
              aria-label={`خواندن مقاله ${featured.title}`}
            >
              <div className="overflow-hidden">
                <img
                  src={featured.image}
                  alt={`تصویر مقاله ${featured.title}`}
                  className="h-full min-h-[20rem] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
                />
              </div>
              <div className="flex flex-col justify-center p-8 lg:p-12">
                <p className="text-xs font-light text-copper">مقاله ویژه — {featured.category}</p>
                <h2 className="mt-6 text-2xl font-bold leading-[2.2] md:leading-[2.2] text-ivory transition-colors duration-200 ease-lux group-hover:text-copper md:text-3xl">
                  {featured.title}
                </h2>
                <p className="mt-6 text-sm font-light leading-10 text-ivory/65">{featured.excerpt}</p>
                <div className="mt-10 flex items-center justify-between border-t border-ivory/10 pt-8 text-xs font-light text-ivory/50">
                  <span className="flex items-center gap-4">
                    <span>{featured.date}</span>
                    <span className="flex items-center gap-1.5">
                      <ClockIcon className="h-3.5 w-3.5" />
                      {featured.read}
                    </span>
                  </span>
                  <span className="flex items-center gap-2 text-copper">
                    ادامه مطلب
                    <ArrowLeftIcon className="h-3.5 w-3.5 transition-transform duration-200 ease-lux group-hover:-translate-x-1" />
                  </span>
                </div>
              </div>
            </Link>
            </EditableItem>
          </Reveal>

          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {rest.map((article, i) => (
              <Reveal key={article.id} delay={0.05 * i} className="h-full">
                <EditableItem resource="articles" item={article} className="h-full">
                  <ArticleCard article={article} />
                </EditableItem>
              </Reveal>
            ))}
            <AddItemButton resource="articles" />
          </div>
        </div>
      </section>

      <Newsletter />
    </>
  )
}