import Image from "next/image";
import type { PortfolioItem } from "@/data/portfolios";
import { resolveMediaUrl } from "@/lib/meshkee";

export function PortfolioGrid({ items }: { items: PortfolioItem[] }) {
  if (!items.length) {
    return (
      <p className="py-16 text-center text-[#777]">
        در حال حاضر پروژه‌ای برای نمایش وجود ندارد.
      </p>
    );
  }

  return (
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {items.map((item) => {
        const image = resolveMediaUrl(item.image);
        return (
          <a
            key={item.id}
            href={`/portfolios/${item.slug}`}
            className="portfolio-card group"
          >
            <div className="relative aspect-[4/3] overflow-hidden bg-[#f0f0f0]">
              {image ? (
                <Image
                  src={image}
                  alt={item.title}
                  fill
                  unoptimized
                  className="object-cover transition duration-500 group-hover:scale-[1.04]"
                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                />
              ) : null}
              <div className="portfolio-card-overlay" />
              <div className="portfolio-card-text">
                <h2>{item.title}</h2>
                {item.titleEn ? <p>{item.titleEn}</p> : null}
              </div>
            </div>
          </a>
        );
      })}
    </div>
  );
}
