import type { FC } from 'react';
import React, { memo } from 'react';
import { StoreIcon } from '@theorchard/suite-icons';
import { STORE } from '../../constants';
import { formatMessage } from '../../locale';

const CLASS_NAME = 'ArtistProfileEmpty';

const ArtistProfileEmpty: FC<{ store?: number }> = ({ store }) => {
    let icon;
    let message;
    switch (store) {
        case STORE.SPOTIFY:
            icon = <StoreIcon name="spotify" />;
            message = formatMessage('artistProfile.emptySpotify');
            break;
        case STORE.APPLE_MUSIC:
            icon = <StoreIcon name="appleMusic" />;
            message = formatMessage('artistProfile.emptyAppleMusic');
            break;
        default:
            icon = null;
            message = null;
            break;
    }
    return (
        <div className={CLASS_NAME}>
            <div className={`${CLASS_NAME}-icon`}>
                <div className={`${CLASS_NAME}-store-icon`}>{icon}</div>
            </div>
            <div className={`${CLASS_NAME}-content`}>{message}</div>
        </div>
    );
};

export default memo(ArtistProfileEmpty);