import styled from 'styled-components';

import Atom from '../../Atom';
import ApoliticalBrand from '../../../Theme/ApoliticalBrand';

const { Button } = Atom;
const { color, breakpoint } = ApoliticalBrand;

export const Card = styled.a`
  text-decoration: none;
  display: block;
  border-radius: 5px;
  box-shadow: 0 4px 15px 0 rgba(197, 202, 208, 0.4);
  font-family: Lato, sans-serif;
  background-color: ${color.white};

  @media ${breakpoint.onlyScreen.tablet} {
    box-shadow: 0 4px 40px 0 rgba(197, 202, 208, 0.5);
    border-radius: 10px;
    width: 250px;
  }

  @media ${breakpoint.onlyScreen.laptopM} {
    width: 370px;
  }
`;

export const ImageBlock = styled.div`
  ${({ imageSrc }) => (imageSrc
    ? `background-image: url(${imageSrc});`
    : `background: linear-gradient(to right, ${color.purple} 0%, ${color.turquoiseBlue} 100%);`)}
  height: 150px;
  background-size: cover;
  background-position: center;
  border-radius: 5px 5px 0px 0px;

  @media ${breakpoint.onlyScreen.laptopM} {
    height: 220px;
    border-radius: 10px 10px 0px 0px;
  }
`;

export const ContentBlock = styled.div`
  padding: 20px;

  @media ${breakpoint.onlyScreen.laptopM} {
    padding: 30px;
  }
`;

export const MicrocourseText = styled.span`
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
  color: ${color.cerise};
  letter-spacing: 1.4px;
  margin-top: 3px;

  @media ${breakpoint.onlyScreen.laptopM} {
    font-size: 16px;
    letter-spacing: 1.87px;
    margin-top: 2px;
  }
`;

export const Title = styled.h3`
  margin-top: 9px;
  font-size: 16px;
  height: 40px;
  color: ${color.black};

  @media ${breakpoint.onlyScreen.laptopM} {
    font-size: 20px;
    height: 48px;
  }
`;

export const DateRow = styled.div`
  text-transform: uppercase;
  color: ${color.slate};
  width: 100%;
  margin-top: 20px;
  letter-spacing: 1.71px;
  font-size: 12px;
  font-weight: 500;

  @media ${breakpoint.onlyScreen.laptopM} {
    margin-top: 30px;
    font-size: 14px;
    letter-spacing: 2px;
  }
`;
export const LargeDate = styled.span`
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2.29px;

  @media ${breakpoint.onlyScreen.laptopM} {
    font-size: 20px;
    letter-spacing: 2.86px;
  }
`;

export const StyledButton = styled(Button)`
  margin-top: 20px;
  width: 100%;
  height: 30px;
  font-size: 12px;

  @media ${breakpoint.onlyScreen.laptopM} {
    height: 40px;
    font-size: 16px;
    margin-top: 35px;
  }
`;