import React, { FunctionComponent } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TextStyle,
  ViewStyle,
} from 'react-native';

import { IStyledProps } from './types';

interface IProps extends IStyledProps<IPannerStyleProps> {
  msg: string;
}
interface IPannerStyleProps {
  container?: ViewStyle;
  pannerText?: TextStyle;
}

export const WarningPanner: FunctionComponent<IProps> = ({ msg, style }) => {
  const mergedStyle = { ...defaultStyles, ...style };
  return (
    <SafeAreaView style={mergedStyle.container}>
      <Text style={mergedStyle.pannerText}>{msg}</Text>
    </SafeAreaView>
  );
};

const defaultStyles: IPannerStyleProps = StyleSheet.create({
  container: {
    backgroundColor: 'orange',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    height: 30,
  },
  pannerText: {
    color: 'white',
    marginRight: 10,
    fontSize: 18,
  },
});