import Link from "next/link";

import { SourceLink } from "@/components/source-link";

import type { ChangeEvent } from "@/lib/feed";

const CHANGE_COLOR: Record<string, string> = {

  added: "var(--dk-yea)",

  updated: "var(--dk-hold)",

  removed: "var(--dk-nay)",

};

export function ChangesFeed({

  items,

  limit,

}: {

  items: ChangeEvent[];

  limit?: number;

}) {

  const shown = limit ? items.slice(0, limit) : items;

  if (shown.length === 0) {

    return (

      <p className="font-mono text-[13px] text-ash-2">

        No recent changes on record.

      </p>

    );

  }

  return (

    <ul className="divide-y divide-[color:var(--dk-line)]">

      {shown.map((c) => {

        const color = CHANGE_COLOR[c.change] ?? "var(--dk-ash)";

        const text = c.summary || `${c.change} ${c.refType}`;

        return (

          <li key={c.id} className="py-2.5">

            <div className="flex items-start gap-2.5">

              <span

                className="pill mt-0.5 shrink-0"

                style={{

                  color,

                  borderColor: `color-mix(in srgb, ${color} 40%, transparent)`,

                }}

              >

                {c.change}

              </span>

              <div className="min-w-0 flex-1">

                <p className="font-mono text-[12px] leading-relaxed text-paper">

                  {c.href ? (

                    <Link

                      href={c.href}

                      className="focus-ring rounded-sm underline underline-offset-4 hover:text-paper"

                    >

                      {text}

                    </Link>

                  ) : (

                    text

                  )}

                </p>

                <p className="label mt-0.5 text-ash-2">

                  {c.source}

                  {c.refId ? ` · ${c.refId}` : ""}

                </p>

              </div>

              <SourceLink url={c.sourceUrl} className="shrink-0" />

            </div>

          </li>

        );

      })}

    </ul>

  );

}