import React, { memo } from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { fp as _ } from '../../common/utils/fp';
import { Card } from './card';
import { ErrorBlock } from '../../common/components/error-block';
import { hasNotificationCountry } from '../transducers';
import { TDecoratedTrackNotificationItem, TNotificationParams } from '../types';

type TProps = {
  cards: TDecoratedTrackNotificationItem[];
  onCardPress: (params: TNotificationParams) => void;
  error: string | boolean;
};

export const CardsNew: React.FC<TProps> = memo(props => {
  const { cards, onCardPress, error } = props;
  return (
    <SBox mb={error ? 49 : 30}>
      <SH6 mb={21}>NEW</SH6>
      {!error
        ? Array.isArray(cards) &&
          _.map((o: TDecoratedTrackNotificationItem) => (
            <Card
              flagVariant="white"
              key={o.id}
              {...o}
              hasCountryCode={hasNotificationCountry(o)}
              variant="new"
              onCardPress={onCardPress}
            />
          ))(cards)
        : null}
      {error ? <ErrorBlock height={126} mr={0} ml={0} message={error} /> : null}
    </SBox>
  );
});