import React from 'react';
import { SText } from '../../../common/s-components/typography/s-text';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SRow } from '../../../common/s-components/layout/s-row';
import { Icon } from '../../../common/components/icon';
import { fp as _ } from '../../../common/utils/fp';
import { STopName } from '../../s-components/s-top-name';

type TProps = {
  title: string;
  date: string;
};

export const CardHeading: React.FC<TProps> = props => {
  const { title, date } = props;
  const updatedDate = date || (_.isNull(date) ? 'N/A' : '');
  return (
    <SBox mb={54}>
      <SRow alignItems="center" mb={4} pr={16}>
        <STopName numberOfLines={1} ellipsizeMode="tail">
          {_.isNil(title) ? 'N/A' : title}
        </STopName>
        <Icon ml={8} pt={2} name="next" size={12} color="white" />
      </SRow>
      <SText medium fontSize={13}>
        {updatedDate === 'N/A'
          ? `Updated: ${updatedDate}`
          : `Updated ${updatedDate}`}
      </SText>
    </SBox>
  );
};