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';
import { BaseStyledHeader } from '../cardItemHeader';

export const AccountInfoHeader = styled(BaseStyledHeader)`
  margin: 0 20px;
  flex-basis: 20%;
`;

const StyledAccountInfo = styled(BaseCardItem)`
  flex-basis: 20%;
`;

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

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

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

const AccountInfoItem = ({ value, ...props }) => {
  const { businessName, name, contactEmail, contactPhone } = value;
  return (
    <StyledAccountInfo
      {...props}
      value={
        <>
          <BusinessName>{businessName}</BusinessName>
          <Name>{name}</Name>
          <StyledLink type="email" href={contactEmail} target="_blank">
            {contactEmail}
          </StyledLink>
          <StyledLink type="phone" href={contactPhone}>
            {contactPhone}
          </StyledLink>
        </>
      }
    />
  );
};

AccountInfoItem.propTypes = {
  value: PropTypes.shape({
    businessName: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    contactEmail: PropTypes.string.isRequired,
    contactPhone: PropTypes.string.isRequired,
  }).isRequired,
};

AccountInfoItem.displayName = 'AccountInfoItem';

export default AccountInfoItem;
