import React from 'react';
import {Pressable, StyleProp, View, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import Text from '@components/Text';
import Icon from '@components/Icon';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

interface Props {
  title?: string;
  showCloseIcon?: boolean;
  onClose?: () => void;
  style?: StyleProp<ViewStyle>;
}

/**
 * @deprecated Use `_HuGo/Modals` instead
 */
export function BottomModalHeader({
  title,
  showCloseIcon,
  onClose,
  style,
}: Props) {
  const {t} = useTranslation();
  const hasTitle = !!title;

  return hasTitle || showCloseIcon ? (
    <View style={[styles.header, style]}>
      {showCloseIcon && (
        <Pressable
          onPress={onClose}
          style={[styles.iconContainer, styles.closeIcon]}>
          <Icon
            name="close"
            color={COLORS.DARK_GRAY_THIRTEEN}
            accessibilityLabel={t('general.close')}
          />
        </Pressable>
      )}
      {hasTitle && (
        <Text variant="h6" align="center" style={styles.title}>
          {title}
        </Text>
      )}
      {showCloseIcon && <View style={styles.iconContainer} />}
    </View>
  ) : null;
}
