sass-mohfarawati/components/site/portfolio-project-grid.tsx

import { ArrowUpRight, CalendarDays } from "lucide-react";
import Link from "next/link";

import { MotionFade } from "@/components/motion-fade";
import { PortfolioCover } from "@/components/site/portfolio-cover";
import { getLocalizedPath, type AppLocale } from "@/lib/locale";
import { getLocalizedValue, type PortfolioProjectView } from "@/lib/portfolio";
import { cn } from "@/lib/utils";

type PortfolioProjectGridProps = {
  locale: AppLocale;
  defaultLocale: AppLocale;
  projects: PortfolioProjectView[];
  emptyLabel: string;
  openLabel: string;
};

export function PortfolioProjectGrid({
  locale,
  defaultLocale,
  projects,
  emptyLabel,
  openLabel,
}: PortfolioProjectGridProps) {
  if (projects.length === 0) {
    return (
      <section>
        <div className="rounded-surface border border-border bg-surface-1 px-6 py-16 text-center text-small text-muted-foreground">
          {emptyLabel}
        </div>
      </section>
    );
  }

  return (
    <section className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
      {projects.map((item, index) => {
        const featured = item.isFeatured;
        const title = getLocalizedValue(item.title, locale);
        const category = getLocalizedValue(item.category.name, locale);

        return (
          <MotionFade
            key={item.slug}
            delay={Math.min(index * 0.05, 0.3)}
            className={cn(featured && "sm:col-span-2 lg:col-span-2")}
          >
            <Link
              href={getLocalizedPath(locale, `/portfolio/${item.slug}`, defaultLocale)}
              className="group flex h-full flex-col overflow-hidden rounded-surface border border-border bg-surface-1 shadow-card transition duration-300 ease-out hover:-translate-y-1 hover:shadow-panel focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
            >
              <div
                className={cn(
                  "relative overflow-hidden",
                  featured ? "aspect-[16/10]" : "aspect-[4/3]",
                )}
              >
                <PortfolioCover
                  src={item.coverImagePath}
                  title={title}
                  category={category}
                  priority={index === 0}
                  sizes={
                    featured
                      ? "(min-width: 1024px) 66vw, 100vw"
                      : "(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
                  }
                />
              </div>

              <div className="flex flex-1 flex-col p-5 sm:p-6">
                <div className="flex items-center justify-between gap-3">
                  <span className="eyebrow text-caption text-muted-foreground">
                    {category}
                  </span>
                  <span className="inline-flex items-center gap-1.5 text-caption text-muted-foreground">
                    <CalendarDays className="h-3.5 w-3.5" />
                    {item.projectYear}
                  </span>
                </div>

                <h2
                  className={cn(
                    "mt-3 font-semibold tracking-tight text-foreground",
                    featured ? "text-h3 sm:text-h2" : "text-h3",
                  )}
                >
                  {title}
                </h2>

                <p className="mt-2 line-clamp-2 text-small leading-relaxed text-muted-foreground">
                  {getLocalizedValue(item.summary, locale)}
                </p>

                <span className="mt-5 inline-flex items-center gap-2 text-caption font-medium text-foreground/70 transition-colors group-hover:text-brand-primary">
                  {openLabel}
                  <ArrowUpRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                </span>
              </div>
            </Link>
          </MotionFade>
        );
      })}
    </section>
  );
}