import React from 'react';
import { cn } from '@/lib/utils';

interface AuthErrorMessageProps {
  message: string;
  className?: string;
  id?: string;
}

export function AuthErrorMessage({
  message,
  className,
  id,
}: AuthErrorMessageProps) {
  if (!message) {
    return null;
  }

  return (
    <div
      id={id}
      className={cn(
        'p-3 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-800',
        className
      )}
      role="alert"
      aria-live="polite"
    >
      <p className="text-sm text-red-600 dark:text-red-400">{message}</p>
    </div>
  );
}