import * as React from 'react';
import { FunctionComponent } from 'react';
import { View, ViewStyle } from 'react-native';

const CircularPanel: FunctionComponent<{
  color: string;
  style?: ViewStyle,
  children: React.ReactNode
}> = (props) => {
  return (
    <View style={[{backgroundColor: props.color}, props.style, {
      paddingVertical: 10,
      paddingHorizontal: 20,
      borderRadius: 30,
    }]}>     
      {props.children}
    </View>
  );
}

export default CircularPanel;
