import { AlertTriangle } from 'lucide-react';

import { Link, usePage } from '@inertiajs/react';

import type { PageProps } from '@/types';

export function FailedJobBanner() {
  const { admin_failed_job_count } = usePage<PageProps>().props;

  if (!admin_failed_job_count) return null;

  return (
    <div
      role="alert"
      className="bg-destructive/10 border-b border-destructive/20 px-4 py-2 text-sm text-destructive flex items-center gap-2"
    >
      <AlertTriangle className="size-4 flex-shrink-0" />
      <span>
        {admin_failed_job_count} failed{' '}
        {admin_failed_job_count === 1 ? 'job' : 'jobs'} in the queue —
      </span>
      <Link href="/admin/system" className="underline font-medium hover:no-underline">
        fix in System
      </Link>
    </div>
  );
}