import React from 'react';
import { Text, type TextStyle, View } from 'react-native';
import { useTheme } from '../../branding';
import themedStyles from './styles';
import type { TitleProps } from './types';

const Title = ({ style, title }: TitleProps) => {
    const { theme } = useTheme();
    const styles = themedStyles[theme];

    return (
        <View style={style}>
            {React.isValidElement(title) ? (
                title
            ) : (
                <Text style={styles.title as TextStyle}>{title}</Text>
            )}
        </View>
    );
};

export default Title;