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

const Root = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 30px 30px;
  background-color: ${props => props.theme.colors.white};
  text-align: center;
  box-shadow: ${props => props.theme.boxShadows.medium};
  border-radius: 10px;
  overflow: hidden;

  .title {
    font-size: clamp(24px, 4vw, 42px);
  }

  img,
  .content {
    z-index: 100;
    position: relative;
  }

  img {
    width: 100%;
    max-width: clamp(70%, 4vw, 320px);
  }

  ${props =>
    props.hasPaint &&
    `
    &::before {
      z-index: 1;
      content: '';
      position: absolute;
      top: -280px;
      left: 50%;
      transform: translateX(-50%);
      display: block;
      height: 360px;
      min-width: 440px;
      width: 80%;
      background: ${props.theme.colors.primaryPalette.v50};
      border-radius: 50%;
    }
  `}

  @media (min-width: ${props => props.theme.breakpoints.large}px) {
    gap: 20px;
    padding: 20px 40px 40px;

    ${props =>
      props.hasPaint &&
      `
      &::before {
        top: -180px;
      }
    `};
  }
`;

const CTACard = ({ hasPaint, illustration, title, description, cta }) => (
  <Root hasPaint={hasPaint}>
    {illustration ? (
      <>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={illustration} alt={title} />
      </>
    ) : null}
    <div className="content">
      <h3 className="title">{title}</h3>
      <p>{description}</p>
    </div>
    {cta ? cta : null}
  </Root>
);

CTACard.propTypes = {
  hasPaint: PropTypes.bool,
  illustration: PropTypes.string,
  title: PropTypes.string,
  description: PropTypes.string,
  cta: PropTypes.node
};

export default CTACard;