Artifacts

import Link from "next/link";
import { Box, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";
import type { Asset } from "@/lib/assets/types";

const STATUS_STYLE: Record<string, string> = {
  Active: "bg-emerald-50 text-emerald-700",
  Archived: "bg-slate-100 text-slate-500",
  Deprecated: "bg-amber-50 text-amber-700",
};

/** Presentational list of assets linking to each asset's detail (with lineage). */
export function AssetList({
  assets,
  showMission = true,
  emptyText = "No assets yet.",
}: {
  assets: Asset[];
  showMission?: boolean;
  emptyText?: string;
}) {
  if (assets.length === 0) {
    return <p className="text-sm text-muted-foreground">{emptyText}</p>;
  }
  return (
    <ul className="divide-y divide-border">
      {assets.map((a) => (
        <li key={a.asset_id}>
          <Link
            href={`/assets/${a.asset_id}`}
            className="group flex items-center gap-3 py-2.5 transition-colors hover:bg-secondary/40"
          >
            <Box className="h-4 w-4 shrink-0 text-muted-foreground" />
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2 text-[13px]">
                <span className="truncate font-medium text-foreground">{a.name}</span>
                <span className="rounded-full bg-secondary px-2 py-0.5 text-[10px] font-medium text-foreground/70">
                  {a.type}
                </span>
              </div>
              <div className="mt-0.5 truncate font-mono text-[11px] text-muted-foreground">
                {showMission ? `${a.mission_id.replace("MISSION-", "M-")} · ` : ""}
                {a.repository} · {a.created_by_executive}
                {a.tags.length > 0 ? ` · ${a.tags.map((t) => `#${t}`).join(" ")}` : ""}
              </div>
            </div>
            <span
              className={cn(
                "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium",
                STATUS_STYLE[a.status] ?? "bg-slate-100 text-slate-500",
              )}
            >
              {a.status}
            </span>
            <span className="hidden shrink-0 text-[11px] text-muted-foreground sm:block">
              {new Date(a.created_at).toLocaleDateString()}
            </span>
            <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground/40 transition-colors group-hover:text-foreground" />
          </Link>
        </li>
      ))}
    </ul>
  );
}