import { Pressable, StyleSheet, Text, View } from 'react-native';
import { AppIcon, type AppIconName, APP_ICON_SIZE } from './app-icon';
import { colors, fonts, radius, spacing } from '../theme/proulr-theme';

export function InfoBanner({
  message,
  icon,
  appIcon,
  onDismiss,
}: {
  message: string;
  icon?: string;
  appIcon?: AppIconName;
  onDismiss?: () => void;
}) {
  const resolvedAppIcon: AppIconName | undefined = appIcon ?? (icon ? undefined : 'info');

  return (
    <View style={styles.infoBanner}>
      <View style={styles.infoIconWrap}>
        {resolvedAppIcon ? (
          <AppIcon name={resolvedAppIcon} size={APP_ICON_SIZE.banner} color={colors.accentText} />
        ) : (
          <Text style={styles.infoIcon}>{icon}</Text>
        )}
      </View>
      <Text style={styles.infoText}>{message}</Text>
      {onDismiss ? (
        <Pressable onPress={onDismiss} hitSlop={8}>
          <AppIcon name="close" size={14} color={colors.textMuted} />
        </Pressable>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  infoBanner: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.md,
    backgroundColor: colors.accentSoft,
    borderRadius: radius.lg,
    padding: spacing.md,
    borderWidth: 1,
    borderColor: colors.border,
  },
  infoIconWrap: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: colors.surface2,
    alignItems: 'center',
    justifyContent: 'center',
  },
  infoIcon: { fontSize: 16, color: colors.accentText },
  infoText: { flex: 1, color: colors.textSecondary, fontSize: 13, lineHeight: 18, fontFamily: fonts.medium },
});