import React, { useState } from 'react'
import { ArrowLeftIcon } from 'lucide-react'
import { Reveal } from '../Reveal'
import { ButtonLink } from '../Button'
import { ProjectCard } from '../ProjectCard'
import { SectionHeading } from '../SectionHeading'
import { PROJECTS, type ProjectStatus } from '../../data/site'

const FILTERS: { key: ProjectStatus; label: string }[] = [
  { key: 'done', label: 'انجام شده' },
  { key: 'progress', label: 'در حال انجام' },
]

export function FeaturedProjects() {
  const [status, setStatus] = useState<ProjectStatus>('done')
  const list = PROJECTS.filter((p) => p.status === status).slice(0, 3)

  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="projects-title">
      <div className="mx-auto max-w-site px-6 lg:px-10">
        <SectionHeading
          title="پروژه‌های شاخص"
          lead="کارهایی که بیشترین چیز را درباره استاندارد ما می‌گویند؛ چه آن‌هایی که تحویل شده‌اند و چه آن‌هایی که همین امروز در حال ساخت‌اند."
        />

        <div className="mt-10 flex flex-wrap items-center gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
          {FILTERS.map((filter) => (
            <button
              key={filter.key}
              type="button"
              role="tab"
              aria-selected={status === filter.key}
              onClick={() => setStatus(filter.key)}
              className={`group relative overflow-hidden border px-7 py-3 text-sm transition-colors duration-300 ease-lux ${
                status === filter.key
                  ? 'border-copper bg-copper font-bold text-char'
                  : 'border-ivory/15 font-light text-ivory/65'
              }`}
            >
              {status !== filter.key && (
                <span
                  aria-hidden="true"
                  className="absolute inset-0 translate-y-full bg-copper transition-transform duration-300 ease-lux group-hover:translate-y-0"
                />
              )}
              <span className="relative z-10 transition-colors duration-300 ease-lux group-hover:text-char">
                {filter.label}
              </span>
            </button>
          ))}
        </div>

        <div className="mt-10 grid gap-6 lg:grid-cols-3">
          {list.map((project, i) => (
            <Reveal key={project.slug} delay={0.06 * i} className="h-full">
              <ProjectCard project={project} />
            </Reveal>
          ))}
        </div>

        <Reveal delay={0.1}>
          <div className="mt-12 flex justify-center">
            <ButtonLink to="/projects" variant="outline" className="font-light">
              همه پروژه‌ها
              <ArrowLeftIcon className="h-4 w-4" />
            </ButtonLink>
          </div>
        </Reveal>
      </div>
    </section>
  )
}