'use client';

import { Clock } from 'lucide-react';
import { useT } from '@/i18n/I18nProvider';

export function DeletingModal({
  open,
  resourceName,
  resourceKind = 'application',
}: {
  open: boolean;
  resourceName: string;
  resourceKind?: 'application' | 'service';
}) {
  const t = useT();
  if (!open) return null;

  const detail =
    resourceKind === 'service'
      ? t.components.deletingModalDetailService
      : t.components.deletingModalDetailApp;

  return (
    <div
      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/45 p-4"
      role="dialog"
      aria-modal="true"
      aria-labelledby="deleting-modal-title"
      aria-busy="true"
    >
      <div className="bg-white rounded-2xl shadow-xl max-w-md w-full p-8 text-center space-y-3">
        <div className="mx-auto w-14 h-14 rounded-full bg-red-50 flex items-center justify-center">
          <Clock className="w-7 h-7 text-red-600 animate-spin" />
        </div>
        <h2 id="deleting-modal-title" className="text-lg font-semibold text-gray-900">
          {t.components.deleting}
        </h2>
        <p className="text-sm text-gray-600">
          {t.components.deletingModalBeingRemoved
            .split('{name}')
            .flatMap((part, i) =>
              i === 0
                ? [part]
                : [<span key={i} className="font-semibold text-gray-900">{resourceName}</span>, part],
            )}
        </p>
        <p className="text-xs text-gray-500">{detail}</p>
        <p className="text-xs text-amber-700 font-medium pt-1">{t.components.deletingModalWait}</p>
      </div>
    </div>
  );
}