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

const StyledAgentItem = styled(BaseCardItem)``;

const Name = styled.span`
  display: block;
  font-size: ${textSize('M')};
  margin-bottom: 8px;
`;

const StyledLink = styled(Link)`
  display: block;
  font-size: ${textSize('S')};
`;

const AgentItem = ({ value, ...props }) => {
  if (value) {
    const { name, phone, email } = value;
    return (
      <StyledAgentItem
        {...props}
        value={
          <>
            <Name>{name}</Name>
            <StyledLink type="email" href={email} target="_blank">
              {email}
            </StyledLink>
            <StyledLink type="phone" href={phone}>
              {phone}
            </StyledLink>
          </>
        }
      />
    );
  }

  return <StyledAgentItem {...props} />;
};

AgentItem.propTypes = {
  value: PropTypes.shape({
    name: PropTypes.string.isRequired,
    phone: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired,
  }),
};

AgentItem.displayName = 'AgentItem';

export default AgentItem;
