import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Icon from '../Icon';

const Root = styled.div`
  margin-bottom: 10px;
  transition: transform 250ms ease-in-out;
  border: 1px solid #ddd;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  font-family: ${props => props.theme.fonts.text};

  &:hover {
    transform: scale(1.03);
  }
`;

const CardImage = styled.img`
  object-fit: cover;
  width: 100%;
`;

const CardBody = styled.div`
  padding: 25px 30px;

  p {
    font-family: ${props => props.theme.fonts.text};
    font-style: normal;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 15px;
  }
`;

const CardLink = styled.a`
  display: flex;
  align-items: center;
  font-weight: 600;
  color: ${props => props.theme.colors.secondary};
  font-family: ${props => props.theme.fonts.text};
  text-decoration: none;

  svg {
    flex-shrink: 0;
    fill: ${props => props.theme.colors.secondary};
    margin-left: 8px;
  }
`;

const CardHeading = styled.div`
  font-size: 24px;
  margin-bottom: 15px;
  margin-top: 0px;
  font-family: ${props => props.theme.fonts.text};
  font-style: normal;
  font-weight: 700;
`;

const Cards = props => {
  const { image, title, titleAs, description, link, textLink, iconLink } = props;
  return (
    <Root>
      <CardImage src={image} />
      <CardBody>
        <CardHeading as={titleAs}>{title}</CardHeading>
        <p>{description}</p>
        <CardLink href={link}>
          {textLink}
          <Icon iconSize={18} name={iconLink} />
        </CardLink>
      </CardBody>
    </Root>
  );
};

Cards.propTypes = {
  image: PropTypes.string,
  title: PropTypes.string,
  titleAs: PropTypes.string,
  description: PropTypes.string,
  link: PropTypes.string,
  textLink: PropTypes.string,
  iconLink: PropTypes.string
};

Cards.defaultProps = {
  title: '',
  image: '',
  titleAs: 'h3',
  description: '',
  textLink: '',
  iconLink: 'ArrowNext'
};

export default Cards;