import React, { FunctionComponent } from 'react';
import { Text, TouchableOpacity, ViewStyle } from 'react-native';
import {
  IFloatButtonProps,
  IFloatButtonStyleProps,
  IStyledProps,
} from './types';

export interface IFlatButtonProps
  extends IFloatButtonProps,
    IStyledProps<IFloatButtonStyleProps> {
  title: string;
}

export interface IButton extends FunctionComponent<IFlatButtonProps> {}

export const FloatButton: IButton = ({ style, title, onPress }) => {
  const mergedStyle = { ...buttonStyle, ...style };

  return (
    <TouchableOpacity
      activeOpacity={0.085}
      onPress={onPress}
      style={mergedStyle.container}
    >
      <Text style={mergedStyle.text}>{title}</Text>
    </TouchableOpacity>
  );
};

const buttonStyle = {
  container: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: '#009DD2',
  } as ViewStyle,
  text: {
    color: '#fff',
  },
};