import { Check, X } from "lucide-react";
import { Badge } from "../../../components/ui/badge";
import { CopyButton } from "../../../components/ui/copy-button";
import type { MyTenantSummary, TenantSummary } from "../../../lib/devApi";
import { t } from "../../../lib/i18n";

type AllowedTenant = Pick<TenantSummary | MyTenantSummary, "id" | "name"> & {
  slug?: string;
};

type AllowedTenantBadgeProps = {
  disabled?: boolean;
  onRemove: () => void;
  tenant: AllowedTenant;
};

export function AllowedTenantBadge({
  disabled = false,
  onRemove,
  tenant,
}: AllowedTenantBadgeProps) {
  return (
    <Badge
      variant="secondary"
      className="flex max-w-full items-center gap-2 px-3 py-1.5"
      data-testid={`allowed-tenant-${tenant.id}`}
      data-tenant-id={tenant.id}
    >
      <Check className="h-3.5 w-3.5 shrink-0" />
      <span className="max-w-44 truncate">{tenant.name}</span>
      {tenant.slug ? (
        <span className="shrink-0 text-[11px] text-muted-foreground">
          {tenant.slug}
        </span>
      ) : null}
      <span className="max-w-64 truncate font-mono text-[11px] text-muted-foreground">
        {tenant.id}
      </span>
      <CopyButton
        aria-label="테넌트 UUID 복사"
        className="h-6 w-6 shrink-0"
        data-testid={`allowed-tenant-copy-${tenant.id}`}
        size="icon"
        value={tenant.id}
        variant="ghost"
      />
      <button
        type="button"
        aria-label={t("ui.common.delete", "삭제")}
        onClick={onRemove}
        className="shrink-0 text-muted-foreground transition hover:text-destructive"
        data-testid={`allowed-tenant-remove-${tenant.id}`}
        disabled={disabled}
      >
        <X className="h-3.5 w-3.5" />
      </button>
    </Badge>
  );
}
