import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { screenSize } from 'Themes/utils/mediaQueries';
import { BaseCardItem } from '../cardItem';
import { PremiumContent } from './premiumItem';
import { CarrierContent } from './carrierItem';
import { BaseStyledHeader } from '../cardItemHeader';

export const PremiumCarrierHeader = styled(BaseStyledHeader)`
  @media ${screenSize('desktop')} {
    display: none;
  }
`;

const StyledPremiumCarrier = styled(BaseCardItem)`
  position: relative;
  flex-basis: 13%;
  display: flex;
  flex-direction: column;

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

const PremiumCarrierContent = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
`;

const PremiumContainer = styled.div`
  position: relative;
`;

const CarrierContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-end;
`;

const PremiumCarrierItem = ({ value, ...props }) => {
  const { premium, carrier } = value;

  return (
    <StyledPremiumCarrier
      {...props}
      value={
        <PremiumCarrierContent>
          <PremiumContainer>
            <PremiumContent {...props} premium={premium} />
          </PremiumContainer>
          <CarrierContainer>
            <CarrierContent {...props} carrier={carrier} />
          </CarrierContainer>
        </PremiumCarrierContent>
      }
    />
  );
};

PremiumCarrierItem.propTypes = {
  value: PropTypes.shape({
    premium: PropTypes.number.isRequired,
    carrier: PropTypes.shape({
      name: PropTypes.string.isRequired,
      logo: PropTypes.string.isRequired,
    }).isRequired,
  }).isRequired,
};

PremiumCarrierItem.displayName = 'PremiumCarrierItem';

export default PremiumCarrierItem;
