import Link from "next/link";
import type { ProjectListItem } from "../../lib/db";
import { PROJECT_STATUSES } from "../../lib/projectStatus";

// Kanban met één kolom per status, zoals de pipeline in het oude Rikx-portaal.
export function ProjectPipeline({ projects, status }: { projects: ProjectListItem[]; status: string }) {
  const columns = status ? PROJECT_STATUSES.filter((s) => s.id === status) : PROJECT_STATUSES;

  return (
    <div className="flex gap-4 overflow-x-auto pb-4 -mx-4 px-4 sm:mx-0 sm:px-0">
      {columns.map((column) => {
        const items = projects.filter((p) => p.status === column.id);
        return (
          <section
            key={column.id}
            className={`${column.columnClass} rounded-xl p-3 w-72 shrink-0 flex flex-col gap-3 min-h-96`}
          >
            <h2 className="flex items-center justify-between px-1 text-sm font-semibold text-zinc-800">
              {column.label}
              <span className="font-normal text-zinc-600">{items.length}</span>
            </h2>
            {items.map((p) => (
              <Link
                key={p.id}
                href={`/projecten/${p.id}`}
                className="block rounded-lg bg-white dark:bg-zinc-900 p-3 shadow-sm ring-1 ring-black/5 hover:ring-rikx-orange transition-shadow"
              >
                <p className="font-medium text-sm text-zinc-900 dark:text-zinc-100 break-words">{p.name}</p>
                {p.ronde_label && (
                  <p className="mt-1 text-xs font-medium text-rikx-orange-dark">{p.ronde_label}</p>
                )}
                <p className="mt-1 text-xs text-zinc-500">
                  Aangemaakt {new Date(p.created_at).toLocaleDateString("nl-NL")}
                </p>
              </Link>
            ))}
          </section>
        );
      })}
    </div>
  );
}