import React, { memo } from 'react';
import { SText } from '../../../../s-components/typography/s-text';
import { SToastBaseText } from '../../../../s-components/s-toast-base-text';
import { UNBREAKABLE_SPACE } from '../../../../constants';
import { getTruncatedName } from '../../../../transducers';

type TProps = {
  name: string;
};

export const PlaylistStarError: React.FC<TProps> = memo(({ name }) => (
  <SToastBaseText>
    {/* eslint-disable-next-line react/no-unescaped-entities */}
    <SText bold>{getTruncatedName(name)}</SText> wasn't starred because of
    {UNBREAKABLE_SPACE}
    an{UNBREAKABLE_SPACE}error.
  </SToastBaseText>
));