import React, { ComponentProps } from 'react';
import { StyleSheet, View } from 'react-native';
import { useTheme } from 'react-native-paper';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import { rgbToRgba } from '../../utilities';

const memeFailStyles = StyleSheet.create({
  view: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const MemeFail = ({
  iconSize,
  ...props
}: {
  iconSize?: number;
} & ComponentProps<typeof View>) => {
  const { colors } = useTheme();

  return (
    <View
      {...props}
      style={[
        props.style,
        memeFailStyles.view,
        {
          backgroundColor: rgbToRgba(colors.error, 0.2),
        },
      ]}>
      <FontAwesome5
        name="exclamation-triangle"
        size={iconSize}
        color={colors.error}
      />
    </View>
  );
};

export default MemeFail;