import React from 'react';
import { useTheme } from '../../branding';
import themedStyles from './styles';
import { Text, TouchableOpacity, View } from 'react-native';
import InformationIcon from '../../components/Icons/InformationIcon';

interface TopPlaylistTitleProps {
    title: string;
    onInfoPress?: () => void;
}

export const TopPlaylistTitle = ({
    title,
    onInfoPress
}: TopPlaylistTitleProps) => {
    const { theme } = useTheme();
    const styles = themedStyles[theme];

    return (
        <View testID="topPlaylistTitle" style={styles.titleContainer}>
            <Text style={styles.playlistTitle}>{title}</Text>
            {onInfoPress ? (
                <TouchableOpacity onPress={onInfoPress}>
                    <InformationIcon />
                </TouchableOpacity>
            ) : null}
        </View>
    );
};

export default TopPlaylistTitle;