import React from "react";
import { Link } from "gatsby";
import { IGatsbyImageData } from "gatsby-plugin-image";

import CardImage from "./card/CardImage";


interface Props {
  title?: string;
  content?: string;
  image?: string | IGatsbyImageData;
  to?: string;
  anime?: boolean;
  layout?: "top" | "left";
  className?: string;
}


const Card = (props: Props) => {
  const {
    to = "#",
    className = "",
    anime = true,
    layout = 'top',
    title,
    content,
    image
  } = props;

  const transition = anime
    ? "lg:transition duration-200 ease-in-out lg:hover:-translate-y-2 lg:hover:shadow-2xl "
    : "";

  const cardside = (layout == 'left') ? "card-side " : "";
  const size = (layout == 'top') ? "max-w-xs " : "h-56 ";
  const sizeContent = (layout == 'top') ? "h-24 " : "";

  return (
    <Link
      to={to}
      className={
        "card card-compact shadow-xl bg-base-100 text-neutral " +
        size +
        transition +
        cardside +
        className
      }
    >
      <CardImage 
        image={image}
        layout={layout}
      />
      {title ? (
        <div className="card-body">
          <h2 className="card-title uppercase">{title}</h2>
            {content ? <p className={`${sizeContent} text-ellipsis overflow-hidden text-justify`} dangerouslySetInnerHTML={{ __html: content }}></p> : null}
        </div>
      ) : null}
    </Link>
  );
};

export default Card;