'use client';

import { Clock } from 'lucide-react';

export function deletingResourceMessage(
  kind: 'application' | 'service',
  name?: string,
): string {
  if (kind === 'service') {
    return name ? `Deleting “${name}”…` : 'Deleting service…';
  }
  return name ? `Deleting “${name}”…` : 'Deleting application…';
}

/** Single table cell spanning the full row — content centered in the row. */
export function DeletingTableRowCell({
  colSpan,
  message = 'Deleting…',
}: {
  colSpan: number;
  message?: string;
}) {
  return (
    <td colSpan={colSpan} className="px-6 py-4 bg-white/95" aria-live="polite" aria-busy="true">
      <div className="flex min-h-[52px] w-full items-center justify-center gap-2 text-sm font-semibold text-gray-800">
        <Clock className="w-4 h-4 shrink-0 animate-spin text-red-600" />
        <span>{message}</span>
      </div>
    </td>
  );
}

/** Full-card overlay while delete is in progress. Parent must be `relative`. */
export function DeletingCardOverlay({ message = 'Deleting…' }: { message?: string }) {
  return (
    <div
      className="absolute inset-0 z-20 flex items-center justify-center gap-2 rounded-xl bg-white/92 backdrop-blur-[2px] text-sm font-semibold text-gray-800"
      aria-live="polite"
      aria-busy="true"
    >
      <Clock className="w-4 h-4 shrink-0 animate-spin text-red-600" />
      <span>{message}</span>
    </div>
  );
}