import React from 'react';
import {View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {BackButton, CloseButton, Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  title?: Nullable<string>;
  hasUrl?: number;
  onClose: () => void;
}

function KnowledgeLibraryHeader({title, hasUrl, onClose}: Props) {
  const {theme} = useTheme();
  const {top} = useSafeAreaInsets();
  const commonProps = {
    onPress: onClose,
    style: {backgroundColor: theme.background.layout.default},
  };
  return (
    <View
      style={[
        styles.content,
        {borderBottomColor: theme.border.neutral.default, paddingTop: top},
      ]}>
      {hasUrl ? (
        <CloseButton iconColor={theme.text.neutral.lighter} {...commonProps} />
      ) : (
        <BackButton {...commonProps} />
      )}
      {!!title && (
        <Typography
          variant="s"
          weight="semiBold"
          numberOfLines={1}
          style={styles.title}>
          {title}
        </Typography>
      )}
    </View>
  );
}

export default KnowledgeLibraryHeader;