// @design-system: domain/admin/HealthBanner

/**
 * HealthBanner — warning banner shown when unresolved system_health_findings exist.
 *
 * Extracted from inline markup in /admin/index.astro.
 * Renders null when count is 0.
 *
 * i18n: admin_system_health namespace.
 *
 * @example
 * ```tsx
 * <HealthBanner count={unresolvedCount} href="/admin/system-health/unarmed-entities" />
 * ```
 */

import { useT } from '@/lib/i18n/react';
import { cn } from '@/lib/cn';

export interface HealthBannerProps {
  /** Number of unresolved health findings. Renders null when 0. */
  count: number;
  /** Link destination. @default '/admin/system-health/unarmed-entities' */
  href?: string;
  /** Additional className. */
  className?: string;
}

export function HealthBanner({
  count,
  href = '/admin/system-health/unarmed-entities',
  className,
}: HealthBannerProps) {
  const t = useT('admin_system_health');

  if (count <= 0) return null;

  return (
    <a
      href={href}
      className={cn(
        'flex items-start gap-3',
        'border-warning-500 bg-warning-50 rounded-lg border-s-4',
        'p-3 transition-colors',
        'hover:bg-warning-100',
        'focus-visible:outline-warning-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
        className,
      )}
      aria-label={`${t('banner_title')} — ${t('banner_link')}`}
    >
      {/* Warning triangle icon */}
      <span className="text-warning-600 mt-0.5 shrink-0" aria-hidden="true">
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
          <line x1="12" y1="9" x2="12" y2="13" />
          <line x1="12" y1="17" x2="12.01" y2="17" />
        </svg>
      </span>

      <div className="min-w-0 flex-1">
        <p className="text-warning-700 text-sm font-bold">
          {t('banner_title')}
          <span className="bg-warning-200 text-warning-800 ms-1 inline-flex items-center rounded-full px-1.5 py-0.5 text-xs font-bold">
            {count}
          </span>
        </p>
        <p className="text-warning-600 mt-0.5 text-sm">
          {t('banner_description')}
          <span className="ms-1 font-medium underline">{t('banner_link')}</span>
        </p>
      </div>
    </a>
  );
}