'use client';
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { ArrowUpLeft } from 'lucide-react';
import { services } from '../lib/content';
import { faSlug } from '../lib/meshkee-api';
export default function PortfolioGrid({items}){const hasReal=items.some(i=>!i.isPlaceholder);const [category,setCategory]=useState('all');useEffect(()=>{const sync=()=>{const value=new URLSearchParams(window.location.search).get('category');setCategory(services.some(s=>s.id===value)?value:'all')};sync();window.addEventListener('popstate',sync);return()=>window.removeEventListener('popstate',sync)},[]);function select(id){setCategory(id);const url=new URL(window.location.href);if(id==='all')url.searchParams.delete('category');else url.searchParams.set('category',id);window.history.pushState({},'',url)}const filtered=hasReal?items:items.filter(i=>category==='all'||i.category===category);return <>{!hasReal&&<div className="category-tabs" role="group" aria-label="فیلتر نمونه‌کارها">{[{id:'all',title:'همهٔ حوزه‌ها'},...services].map(s=><button key={s.id} aria-pressed={category===s.id} onClick={()=>select(s.id)}>{s.title}</button>)}</div>}{!hasReal&&<p className="portfolio-note">هنوز نمونه‌کاری در API منتشر نشده است؛ تصاویر زیر پیش‌نمایش حوزه‌های طراحی هستند.</p>}<div className="portfolio-grid">{filtered.map(item=><article key={item.id}><Link href={item.isPlaceholder?`/portfolios/${item.slug}/`:`/portfolios/${item.id}/${faSlug(item.title)}/`}><div className="portfolio-image"><img src={item.image} alt={item.isPlaceholder?`پیش‌نمایش ${item.title}`:item.title} loading="lazy"/>{item.isPlaceholder&&<span>پیش‌نمایش</span>}</div><div className="portfolio-card-title"><div><small>{item.categoryName||'گروه معماری ساناز گودرزی'}</small><h2>{item.title}</h2></div><ArrowUpLeft size={23}/></div></Link></article>)}</div><span role="status" className="sr-only">{filtered.length} مورد نمایش داده می‌شود</span></>}