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

import { MotionFade } from "@/components/motion-fade";
import { pickText, portfolioItems, resolveLocale } from "@/lib/site-data";

type PortfolioPageProps = {
  params: {
    locale: string;
  };
};

export default function PortfolioPage({ params: { locale } }: PortfolioPageProps) {
  const localeKey = resolveLocale(locale);

  const copy =
    localeKey === "de"
      ? {
          title: "Portfolio",
          intro: "Eine Auswahl von Projekten mit Fokus auf Klarheit und Ergebnis.",
          open: "Projekt oeffnen",
        }
      : {
          title: "Portfolio",
          intro: "Selected projects with a focus on clarity and outcomes.",
          open: "Open project",
        };

  return (
    <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
      <MotionFade>
        <section className="rounded-3xl border border-default bg-surface p-6   lg:p-10">
          <div className="flex items-center gap-3">
            <FolderKanban className="h-5 w-5 text-muted-strong" />
            <h1 className="text-3xl font-semibold text-fg sm:text-4xl">
              {copy.title}
            </h1>
          </div>
          <p className="mt-4 max-w-3xl text-base text-muted sm:text-lg">
            {copy.intro}
          </p>
        </section>
      </MotionFade>

      <section className="grid gap-4 md:grid-cols-2">
        {portfolioItems.map((item, index) => (
          <MotionFade key={item.slug} delay={index * 0.05}>
            <Link
              href={`/${localeKey}/portfolio/${item.slug}`}
              className="group block rounded-2xl border border-default bg-surface p-5 transition group-hover-border-strong   "
            >
              <div className="flex items-center justify-between gap-3">
                <p className="text-sm text-subtle">
                  {pickText(item.category, localeKey)}
                </p>
                <p className="inline-flex items-center gap-1 text-xs text-subtle">
                  <CalendarDays className="h-3.5 w-3.5" />
                  {item.year}
                </p>
              </div>
              <h2 className="mt-3 text-xl font-semibold text-fg">
                {pickText(item.title, localeKey)}
              </h2>
              <p className="mt-2 text-sm text-muted">
                {pickText(item.summary, localeKey)}
              </p>
              <p className="group-hover-fg mt-4 inline-flex items-center gap-2 text-sm font-medium text-muted-strong">
                {copy.open}
                <ArrowUpRight className="h-4 w-4" />
              </p>
            </Link>
          </MotionFade>
        ))}
      </section>
    </div>
  );
}