import { Alert } from '@mantine/core';
import { IconAlertCircle } from '@tabler/icons-react';

interface ApiErrorAlertProps {
  error: unknown;
  title?: string;
}

export function ApiErrorAlert({ error, title = 'An error occurred' }: ApiErrorAlertProps) {
  const message =
    error instanceof Error
      ? error.message
      : typeof error === 'object' && error !== null && 'data' in error
      ? String(
          (error as { data: { message?: string } }).data?.message ?? 'Unknown error',
        )
      : 'Something went wrong. Please try again.';

  return (
    <Alert icon={<IconAlertCircle size={16} />} title={title} color="red" variant="light">
      {message}
    </Alert>
  );
}
