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';

type TProps = {
  track?: string;
  name?: string;
  artist?: string;
  artists?: string;
};

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