Integration card

"use client";

import * as React from "react";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

type IntegrationCardProps = Omit<React.ComponentProps<"div">, "children"> & {
  /** The service's name. */
  name: string;
  /** One line on what connecting does. */
  description?: string;
  /** The logo, as an icon or inline SVG in currentColor. Initials show when it is missing. */
  icon?: React.ReactNode;
  /** Controlled state. */
  connected?: boolean;
  /** Starting state when uncontrolled. */
  defaultConnected?: boolean;
  /** Called with the next state when the switch flips. */
  onConnectedChange?: (connected: boolean) => void;
  /** Locks the switch and fades the card. */
  disabled?: boolean;
};

function initials(name: string) {
  const parts = name.trim().split(/\s+/);
  return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase();
}

/**
 * A service with its logo, a one-line description and a switch that connects it.
 * The status line under the name follows the switch.
 */
export function IntegrationCard({
  name,
  description,
  icon,
  connected,
  defaultConnected = false,
  onConnectedChange,
  disabled = false,
  className,
  ...props
}: IntegrationCardProps) {
  const [internal, setInternal] = React.useState(defaultConnected);
  const isConnected = connected ?? internal;
  const id = React.useId();

  const change = (next: boolean) => {
    if (connected === undefined) setInternal(next);
    onConnectedChange?.(next);
  };

  return (
    <div
      data-slot="integration-card"
      data-connected={isConnected || undefined}
      className={cn("flex w-full items-start gap-3 rounded-lg border bg-card p-4 text-card-foreground", className)}
      {...props}
    >
      <span
        aria-hidden="true"
        className={cn(
          "inline-grid size-10 shrink-0 place-items-center rounded-md bg-muted text-sm font-medium [&_svg]:size-5",
          disabled ? "text-muted-foreground" : "text-foreground",
        )}
      >
        {icon ?? initials(name)}
      </span>
      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
        <span
          id={`${id}-name`}
          className={cn("truncate text-sm font-medium", disabled ? "text-muted-foreground" : "text-foreground")}
        >
          {name}
        </span>
        <span id={`${id}-status`} aria-live="polite" className="font-mono text-xs text-muted-foreground">
          {isConnected ? "Connected" : "Not connected"}
        </span>
        {description && (
          <span id={`${id}-description`} className="mt-1 text-sm text-muted-foreground">
            {description}
          </span>
        )}
      </div>
      <Switch
        aria-label={`Connect ${name}`}
        aria-describedby={description ? `${id}-description` : undefined}
        checked={isConnected}
        onCheckedChange={change}
        disabled={disabled}
        className="mt-0.5 shrink-0"
      />
    </div>
  );
}