web2.0-frontend/src/components/Card.tsx

import React from "react";
import styled from "styled-components";
import { colors } from "@theme/colors";
import Anchor from "@components/Anchor";

interface WrappedCardProps {
  title: string;
  start_time: string;
  text: string;
  link: string;
  image?: string;
  imageAlt?: string;
  buttonOnClick?: () => void;
}

interface CardProps {
  title: string;
  start_time: string;
  text: string;
  img: JSX.Element;
  button: JSX.Element;
}

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

  img {
    width: 100%;
    max-height: 300px;
    margin-bottom: 1rem;
  }

  p {
    font-size: 16px;
    text-overflow: ellipsis;
    margin: 0 0 0.5rem;
    font-weight: 200;
    line-height: 22px;
  }

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

    @media screen and (max-width: 1200px) {
      margin: 0.5rem 0;
      font-size: 16px;
    }
  }


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

  button {
    cursor: pointer;

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

const Card: React.FC<CardProps> = ({ title, start_time, text, img, button }) => (
  <StyledCard>
    {img}
    <p>{start_time}</p>
    <h3>{title}</h3>
    <p>{text}</p>
    {button}
  </StyledCard>
);

const WrappedCard: React.FC<WrappedCardProps> = ({ title, text, link, image, imageAlt, start_time, buttonOnClick }) => {
  const options = {
    day: "numeric",
    month: "numeric",
    year: "numeric",
    hour: "numeric",
    minute: "2-digit"
  };
  const datetime = new Date(start_time).toLocaleString("fi-FI", options);
  const img = image ? (
    <img src={image} alt={imageAlt} />
  ) : null;

  const button = (
    <Anchor to={link}>
      <button onClick={buttonOnClick}>
      Lue lisää&nbsp;›
      </button>
    </Anchor>
  );

  return (
    <Card
      title={title}
      start_time={datetime}
      text={text}
      img={img}
      button={button}
    />
  );
}

export default WrappedCard;