import type { FC } from 'react';
import React from 'react';

export enum Pages {
    SONGS = 'songs',
}

export interface Props {
    page: Pages;
    isLoading: boolean;
    showSubHeader?: boolean;
}

const CLASSNAME = 'EmptyState';
export const INTL_CLASSNAME = 'publishing.emptyState';

const EmptyState: FC<Props> = ({ page, isLoading, showSubHeader = true }) => (
    <div className={CLASSNAME}>
        <div className={`${CLASSNAME}-header`}>
            {isLoading
                ? $t(`${INTL_CLASSNAME}.${page}.searching`)
                : $t(`${INTL_CLASSNAME}.${page}.noItems`)}
        </div>

        {!isLoading && showSubHeader && (
            <div className={`${CLASSNAME}-sub-header`}>
                {$t(`${INTL_CLASSNAME}.${page}.addByClickingNew`)}
            </div>
        )}
    </div>
);

export default EmptyState;