'use client';

import { AlertCircle, RefreshCw, X } from 'lucide-react';

import { cn } from '@djangocfg/ui-core/lib';

import { useChatDestructiveStyles } from '../styles';

export interface ErrorBannerProps {
  error: string | null;
  onDismiss?: () => void;
  onRetry?: () => void;
  className?: string;
}

export function ErrorBanner({ error, onDismiss, onRetry, className }: ErrorBannerProps) {
  const styles = useChatDestructiveStyles();
  if (!error) return null;
  return (
    <div
      role="alert"
      className={cn(
        'mx-2.5 my-2 flex items-start gap-2 rounded-md px-3 py-2 text-xs',
        styles.banner,
        className,
      )}
    >
      <AlertCircle aria-hidden className="mt-0.5 size-3.5 shrink-0" />
      <p className="min-w-0 flex-1 break-words">{error}</p>
      {onRetry ? (
        <button
          type="button"
          onClick={onRetry}
          className={cn('inline-flex items-center gap-1 rounded px-1.5 py-0.5', styles.hover)}
        >
          <RefreshCw aria-hidden className="size-3" /> Retry
        </button>
      ) : null}
      {onDismiss ? (
        <button
          type="button"
          aria-label="Dismiss"
          onClick={onDismiss}
          className={cn('rounded p-0.5', styles.hover)}
        >
          <X aria-hidden className="size-3" />
        </button>
      ) : null}
    </div>
  );
}