import React from 'react'
import { View, Pressable, Linking } from 'react-native'
import { sharedStyles } from './styles'
import { LogoIcon } from './icons'

interface ModalHeaderProps {
  children?: React.ReactNode
}

const ModalHeader: React.FC<ModalHeaderProps> = ({ children }) => {
  return (
    <View style={sharedStyles.popoverHeader}>
      <View style={sharedStyles.modalHandle} />
      <View style={sharedStyles.popoverHeaderContent}>
        <Pressable
          onPress={() => Linking.openURL('https://www.multiplayer.app')}
        >
          <LogoIcon size={42} />
        </Pressable>
        {children}
      </View>
    </View>
  )
}

export default ModalHeader