import type { ReactNode } from "react";
import { useOpenGeniText } from "./messages/runtime";

export type ConnectionInstalledItem = {
  id: string;
  name: string;
  status: string;
  showStatus?: boolean;
  icon?: ReactNode;
  needsAttention?: boolean;
  disabled?: boolean;
  onOpen: () => void;
};

/** Compact account/service shortcuts. The host supplies authoritative status. */
export function ConnectionInstalled({
  items,
  title: titleProp,
  className = "",
}: {
  items: ConnectionInstalledItem[];
  title?: string;
  className?: string;
}) {
  const t = useOpenGeniText();
  const title = titleProp === undefined ? t("connectionInstalled.connected") : titleProp;
  if (!items.length) return null;
  return (
    <section aria-label={title} className={`og-connection-installed ${className}`}>
      <h2>
        {title} <span>{items.length}</span>
      </h2>
      <div>
        {items.map((item) => (
          <button
            key={item.id}
            type="button"
            onClick={item.onOpen}
            disabled={item.disabled}
            title={item.status}
            aria-label={`${item.name} · ${item.status}`}
          >
            {item.icon}
            <span>{item.name}</span>
            {item.showStatus ? (
              <span className="og-connection-installed-status">{item.status}</span>
            ) : null}
            {item.needsAttention ? (
              <span aria-label={t("connectionInstalled.needsAttention")}>!</span>
            ) : null}
          </button>
        ))}
      </div>
    </section>
  );
}