managarten/picture/packages/mobile-ui/components/ui/ErrorBanner/ErrorBanner.tsx

import { View, Pressable, ViewStyle } from 'react-native';
import { Text } from '../Text/Text';
import { Icon } from '../Icon/Icon';

export type ErrorBannerVariant = 'error' | 'warning' | 'info' | 'success';

export type ErrorBannerProps = {
  /** Message to display */
  message: string;
  /** Callback when dismiss button is pressed */
  onDismiss: () => void;
  /** Banner variant */
  variant?: ErrorBannerVariant;
  /** Position from top */
  top?: number;
  /** Horizontal margin */
  horizontalMargin?: number;
  /** Custom background color (overrides variant) */
  backgroundColor?: string;
  /** Custom text color */
  textColor?: string;
  /** Custom icon name */
  icon?: string;
  /** Additional styles */
  style?: ViewStyle;
};

const variantConfig: Record<ErrorBannerVariant, { bg: string; icon: string }> = {
  error: {
    bg: '#EF4444', // red-500
    icon: 'alert-circle',
  },
  warning: {
    bg: '#F59E0B', // amber-500
    icon: 'warning',
  },
  info: {
    bg: '#3B82F6', // blue-500
    icon: 'information-circle',
  },
  success: {
    bg: '#10B981', // green-500
    icon: 'checkmark-circle',
  },
};

/**
 * Banner component for displaying error, warning, info, or success messages.
 *
 * @example
 * ```tsx
 * <ErrorBanner
 *   message="Something went wrong"
 *   onDismiss={() => setError(null)}
 * />
 *
 * <ErrorBanner
 *   message="Changes saved successfully"
 *   variant="success"
 *   onDismiss={() => {}}
 * />
 * ```
 */
export function ErrorBanner({
  message,
  onDismiss,
  variant = 'error',
  top = 60,
  horizontalMargin = 16,
  backgroundColor,
  textColor = '#FFFFFF',
  icon,
  style,
}: ErrorBannerProps) {
  const config = variantConfig[variant];
  const bgColor = backgroundColor || config.bg;
  const iconName = icon || config.icon;

  return (
    <View
      style={{
        position: 'absolute',
        top,
        left: horizontalMargin,
        right: horizontalMargin,
        backgroundColor: bgColor,
        borderRadius: 12,
        padding: 16,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        zIndex: 1000,
        // Shadow
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 12,
        elevation: 8,
        ...style,
      }}
    >
      {/* Message with Icon */}
      <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
        <Icon
          name={iconName}
          size={20}
          color={textColor}
          style={{ marginRight: 12 }}
        />
        <Text
          variant="body"
          style={{ color: textColor, flex: 1 }}
        >
          {message}
        </Text>
      </View>

      {/* Dismiss Button */}
      <Pressable
        onPress={onDismiss}
        hitSlop={8}
        style={({ pressed }) => ({
          opacity: pressed ? 0.7 : 1,
        })}
      >
        <Icon name="close" size={20} color={textColor} />
      </Pressable>
    </View>
  );
}