import React from "react";
import Image from "next/legacy/image";
import styled from "styled-components";
import colors from "@theme/colors";
import Link from "@components/Link";
import breakpoints from "@theme/breakpoints";

interface WrappedCardProps {
  title: string;
  startTime: string;
  text: string;
  link: string;
  image?: {
    src: string;
    alt: string;
  };
  buttonOnClick?: () => void;
  buttonText?: string;
}

const StyledCard = styled.article`
  display: flex;
  flex-direction: column;
  color: ${colors.black};
  margin: 1rem;
  text-align: center;

  p {
    font-size: 1rem;
    text-overflow: ellipsis;
    margin: 0 0 0.5rem;
    font-weight: 200;
    line-height: 1.375;
  }

  p:first-of-type {
    color: ${colors.orange1};
    font-weight: 600 !important;

    @media screen and (max-width: ${breakpoints.medium}) {
      margin: 0.5rem 0;
    }
  }

  h3 {
    hyphens: auto;
    padding: 0.5rem;
    font-size: 1.5rem;
    font-weight: 300;
  }

  a {
    margin-top: auto;

    button {
      cursor: pointer;
      padding: 0.8rem 2rem;
      margin: 0.5rem;
      font-size: 0.8rem;
      background: none;
      text-transform: uppercase;
      background-color: ${colors.blue1};
      color: ${colors.white};
      font-weight: 800;
      letter-spacing: 1.5px;
      border: none;
    }
  }
`;

const WrappedCard: React.FC<WrappedCardProps> = ({
  title, text, link, image, startTime, buttonOnClick, buttonText, ...props
}) => (
  <StyledCard {...props}>
    {image && (
      <Image src={image.src} alt={image.alt} layout="responsive" width={0} height={0} objectFit="scale-down" />
    )}
    <p>{startTime}</p>
    <h3>{title}</h3>
    <p>{text}</p>
    <Link to={link}>
      <button type="button" onClick={buttonOnClick}>
        {buttonText}
      </button>
    </Link>
  </StyledCard>
);

export default WrappedCard;