import {View} from 'react-native'

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

// the failure counterpart to EmptyState/LoadingState: one layout for every
// screen-level load error, with an optional retry
export const ErrorState = ({
  message,
  onRetry,
}: {
  message: string
  onRetry?: () => void
}) => {
  const t = useTheme()
  return (
    <View
      accessibilityRole="alert"
      style={[a.align_center, a.py_2xl, a.gap_md]}
    >
      <Text style={[a.text_center, t.atoms.text_contrast_medium]}>
        {message}
      </Text>
      {onRetry && <Button label="Retry" onPress={onRetry} />}
    </View>
  )
}
