import { Text, View } from 'react-native'

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import Error from '../illustrations/Error'
import Success from '../illustrations/Success'
import { AutoLayout } from './AutoLayout'
import { Button } from './Button'

/**
 *  Figma: https://www.figma.com/file/PKczUvdmkqdqIvKBgmWsqO/Components?node-id=5392%3A7241
 */

export const NotificationView: React.FC<{
  title: string
  body?: string
  buttonText: string
  onPressButton: () => void
  type: 'success' | 'error'
  additionalText?: string
}> = ({ title, body, buttonText, onPressButton, type, additionalText }) => (
  <View
    style={{
      paddingVertical: 16,
      flex: 1,
    }}
  >
    <AutoLayout
      gap={32}
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      {type === 'success' ? <Success /> : <Error />}
      <AutoLayout gap={8}>
        <View>
          <Text
            style={[
              TextStyles.h4,
              { color: colors.white, textAlign: 'center' },
            ]}
          >
            {title}
          </Text>
        </View>
        <View>
          {body && (
            <Text style={[TextStyles.bodyMedium, { textAlign: 'center' }]}>
              {body}
            </Text>
          )}
        </View>
      </AutoLayout>
      <Button onPress={onPressButton}>{buttonText}</Button>
    </AutoLayout>
    {additionalText && (
      <Text style={[TextStyles.bodySmall, { textAlign: 'center' }]}>
        {additionalText}
      </Text>
    )}
  </View>
)