import React, {memo} from 'react';
import {View} from 'react-native';
import {IconArrowLeft, IconX} from '@tabler/icons-react-native';
import {Typography} from '@components/_core/Typography';
import {IconButton} from '@components/_HuGo/Button';

import {useStepper} from '../../hooks/useStepper';
import {styles} from './styles';

function Header() {
  const {
    headerProps: {
      goBack: headerBack,
      onClose,
      title,
      disabledBack,
      RightComponent,
      hideClose,
      titleNumberOfLines,
    },
    goBack,
  } = useStepper();

  return (
    <View style={styles.headerTitle}>
      <IconButton
        variant="flat"
        Icon={IconArrowLeft}
        onPress={headerBack ?? goBack}
        disabled={disabledBack}
        style={styles.sideContent}
      />
      <View style={styles.title}>
        <Typography
          variant="s"
          weight="semiBold"
          numberOfLines={titleNumberOfLines}>
          {title}
        </Typography>
      </View>
      <View style={[styles.sideContent, styles.rightContent]}>
        {RightComponent ? (
          <RightComponent />
        ) : hideClose ? (
          <View style={styles.rightPlaceholder} />
        ) : (
          <IconButton variant="flat" Icon={IconX} onPress={onClose} />
        )}
      </View>
    </View>
  );
}

const MemorizedHeader = memo(Header);
export {MemorizedHeader as Header};
