import { PlugZap } from "lucide-react";

import type { IntegrationSettings } from "../../api/settings";
import { testIntegrationPlaceholder } from "../../api/settings";
import { Button } from "../common/Button";

interface IntegrationStatusProps {
  integration: IntegrationSettings;
}

export function IntegrationStatus({ integration }: IntegrationStatusProps) {
  return (
    <div className="integration-row">
      <div>
        <div className="integration-row__title">
          <strong>{integration.name}</strong>
          <span className={`status-pill status-pill--${integration.status}`}>{integration.status}</span>
        </div>
        <p>{integration.endpointLabel}</p>
        {typeof integration.tokenConfigured === "boolean" ? (
          <small>Token configured: {integration.tokenConfigured ? "yes" : "no"}</small>
        ) : null}
      </div>
      <div className="integration-row__actions">
        <span className={integration.enabled ? "enabled-label" : "enabled-label is-muted"}>
          {integration.enabled ? "Enabled" : "Disabled"}
        </span>
        <Button
          type="button"
          variant="secondary"
          size="sm"
          icon={<PlugZap size={15} aria-hidden="true" />}
          onClick={() => void testIntegrationPlaceholder(integration.key)}
        >
          Test
        </Button>
      </div>
    </div>
  );
}