import React from 'react';
import {View, Pressable} from 'react-native';
import {IconX} from '@tabler/icons-react-native';
import {Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface HeaderProps {
  title: string;
  onClose: () => void;
  showCloseIcon?: boolean;
}

export function Header({title, onClose, showCloseIcon = true}: HeaderProps) {
  const {theme, iconSizes} = useTheme();

  return (
    <View style={styles.headerContainer}>
      <Typography weight="semiBold" align="center">
        {title}
      </Typography>
      {showCloseIcon && (
        <Pressable style={styles.closeButton} onPress={onClose}>
          <IconX size={iconSizes.x6} color={theme.text.neutral.default} />
        </Pressable>
      )}
    </View>
  );
}