import React, { memo } from 'react';
import { Text } from 'react-native';
import { withTheme } from '../../branding';
import { formatMessage } from '../../i18n';
import styles from './styles';
import type { ThemeModeType } from '../BrandFilters/BrandFilters.tsx';

interface AddedDateProps {
    theme: ThemeModeType;
    addedDate?: string;
}

const AddedDate = ({ theme, addedDate }: AddedDateProps) => {
    const themeStyles = styles[theme];

    if (!addedDate) {
        return null;
    }

    return (
        <Text testID="songTileAddedDate" style={themeStyles.textSecondary}>
            {formatMessage('playlist.added', { date: addedDate })}
        </Text>
    );
};

export default memo(withTheme(AddedDate));