/* eslint-disable @typescript-eslint/no-explicit-any */
import type { FunctionComponent } from 'react';
import React from 'react';
import { Text } from 'react-native';
import type { Styles } from './styles';
import themedStyles from './styles';
import type { ThemeProps } from '../../branding/hoc/types';
import { withTheme } from '../../branding';

interface Props {
    title?: string;
}

export const HeaderTitle = ({ title = '', theme }: Props & ThemeProps) => {
    const styles = (themedStyles as any)[theme] as Styles;

    return (
        <Text style={styles.title} numberOfLines={2} ellipsizeMode="tail">
            {title.toUpperCase()}
        </Text>
    );
};

export default withTheme(HeaderTitle) as FunctionComponent<Props>;