import { Container, Image, Row, StyleSystemThemedProps } from 'components/layout';
import LogoImage from 'assets/images/logo.png';
import { GestureResponderEvent } from 'react-native';
import { Button } from 'components/button';

export const ScreenHeader: React.FC<ScreenHeaderType> = ({ onPress, ...props }) => {
  return (
    <Row
      flexDirection="row"
      px="3xl"
      height={80}
      alignItems="center"
      justifyContent="space-between"
      {...props}
    >
      <Image height={35} width={110} resizeMode="contain" source={LogoImage} />
      <Row>
        <Button sizeVariant="medium" title={'Learn More'} titleColor="title" onPress={() => {}} />
        <Container px="xs" />
        <Button sizeVariant="medium" title={'Help'} titleColor="title" onPress={() => {}} />
      </Row>
    </Row>
  );
};

type ScreenHeaderType = StyleSystemThemedProps & ScreenHeaderProps;
export interface ScreenHeaderProps {
  onPress?: ((event: GestureResponderEvent) => void) | undefined;
}