import {SymbolView} from 'expo-symbols'
import {useEffect} from 'react'
import {AccessibilityInfo, View} from 'react-native'

import {Text} from '@/components/ui/typography'
import {atoms as a, useTheme} from '@/sprinkles'

export function FormError({error}: {error?: string}) {
  const t = useTheme()

  // voiceover gets the error the moment it appears, not only on focus
  useEffect(() => {
    if (error) AccessibilityInfo.announceForAccessibility(error)
  }, [error])

  if (!error) return null

  return (
    <View
      accessibilityRole="alert"
      style={[
        {backgroundColor: t.palette.negative_50},
        a.flex_row,
        a.rounded_sm,
        a.p_md,
        a.gap_sm,
      ]}
    >
      <SymbolView
        name="exclamationmark.triangle.fill"
        size={20}
        tintColor={t.palette.negative_600}
      />
      <View style={[a.flex_1]}>
        <Text
          style={[{color: t.palette.negative_600}, a.font_semi_bold]}
        >
          {error}
        </Text>
      </View>
    </View>
  )
}
