// components/ErrorAlert.tsx
interface ErrorAlertProps {
  title: string;
  message: string;
}

export const ErrorAlert = ({ title, message }: ErrorAlertProps) => (
  <div
    className='mb-4 rounded-lg border border-destructive/50 bg-destructive/10 p-4'
    role='alert'
    aria-live='assertive'
  >
    <p className='font-semibold text-destructive-foreground'>{title}</p>
    <p className='text-sm text-destructive-foreground/90'>{message}</p>
  </div>
);