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

export const CarrierHeader = styled(BaseStyledHeader)`
  display: none;

  @media ${screenSize('desktop')} {
    display: inline;
  }
`;

const CarrierItemStyled = styled(BaseCardItem)`
  display: none;

  @media ${screenSize('desktop')} {
    display: block;
  }
`;

const Logo = styled.img`
  width: 120px;
`;

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

  @media ${screenSize('desktop')} {
    display: block;
  }
`;

export const CarrierContent = ({ carrier }) => {
  const { name, logo } = carrier;

  return (
    <>
      <Logo src={logo} />
      <Name>{name}</Name>
    </>
  );
};

const CarrierItem = ({ value, ...props }) => {
  return (
    <CarrierItemStyled
      {...props}
      value={<CarrierContent carrier={value} {...props} />}
    />
  );
};

CarrierItem.propTypes = {
  value: PropTypes.shape({
    name: PropTypes.string.isRequired,
    logo: PropTypes.string.isRequired,
  }).isRequired,
};

CarrierItem.displayName = 'CarrierItem';

export default CarrierItem;
