import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { grayColor } from 'Themes/utils/colorPickers';
import { textSize } from 'Themes/utils/fontPickers';
import { BaseCardItem } from '../cardItem';

const Title = styled.span`
  display: block;
  color: ${grayColor};
  font-size: ${textSize('S')};
`;

const LastActivityItem = ({ value, ...props }) => {
  return (
    <BaseCardItem
      {...props}
      value={
        <>
          <Title>Updated At:</Title>
          {value}
        </>
      }
    />
  );
};

LastActivityItem.propTypes = {
  value: PropTypes.string.isRequired,
};

LastActivityItem.displayName = 'LastActivityItem';

export default LastActivityItem;
