import Link from "next/link";
import { StatusBadge } from "@/components/ui/badge";
import { t } from "@/lib/i18n/de";
import type { BeladungItem } from "@/lib/detail/queries";

/**
 * Beladung eines Fahrzeugs: jedes Gerät verlinkt auf seine Detailseite
 * (`/geraete/<id>`). Leere Liste => deutscher Empty-State.
 */
export function BeladungListe({ items }: { items: BeladungItem[] }) {
  return (
    <section>
      <h2 className="text-sm font-semibold text-navy">{t("detail.beladung")}</h2>
      {items.length === 0 ? (
        <p className="mt-2 text-sm text-anthrazit/60">{t("detail.keineBeladung")}</p>
      ) : (
        <ul className="mt-3 divide-y divide-rand/60">
          {items.map((it) => (
            <li
              key={it.id}
              className="flex items-center justify-between gap-3 py-2"
            >
              <div className="min-w-0">
                <Link
                  href={`/geraete/${it.id}`}
                  className="font-medium text-navy hover:underline"
                >
                  {it.name}
                </Link>
                <p className="truncate text-xs text-anthrazit/60">{it.kategorie}</p>
              </div>
              <StatusBadge status={it.status} />
            </li>
          ))}
        </ul>
      )}
    </section>
  );
}
