import React from "react";

import { landing } from "../../assets/images";
import { Header1 } from "../common";
import { Link } from "../link";

import {
  CardHeader,
  CardWrapper,
  SubHeader,
  Content,
  CardImage,
  CardText,
} from "./card.style";

export const Card = ({
  title,
  subTitle,
  children,
  image,
  link,
  directionReverse,
}) => (
  <CardWrapper>
    <CardHeader>
      {title && (
        <Header1>
          <Link inheritColor href={link}>
            {title}
          </Link>
        </Header1>
      )}
      {subTitle && <SubHeader>{subTitle}</SubHeader>}
    </CardHeader>
    <Content directionReverse={directionReverse}>
      {image && (
        <CardImage directionReverse={directionReverse} src={landing[image]} />
      )}
      <CardText>{children}</CardText>
    </Content>
  </CardWrapper>
);

Card.defaultProps = {
  title: void 0,
  subTitle: void 0,
  image: void 0,
  link: void 0,
  directionReverse: false,
};