import Feather from '@expo/vector-icons/Feather'
import { ICON } from 'src/lib/icons'
import { Button, Text, useTheme, YStack } from 'tamagui'

type Props = {
  message?: string
  onRetry?: () => void
}

export function ErrorState({ message = 'Something went wrong', onRetry }: Props) {
  const theme = useTheme()

  return (
    <YStack flex={1} justifyContent="center" alignItems="center" py="$8" gap="$4">
      <Feather name="alert-triangle" size={ICON.empty} color={theme.colorDanger.val} />
      <Text color="$color" ta="center" px="$6">
        {message}
      </Text>
      {onRetry && (
        <Button size="$3" onPress={onRetry}>
          Try Again
        </Button>
      )}
    </YStack>
  )
}
