import React from "react"
import Image, {Iimage} from "./Image"
import { Link } from "@onegeo/gatsby-theme-onegeo"

export interface ICard extends Iimage {
    title?: string
    content?: string
    to?: string
    anime?: boolean
    layout?: "top" | "left"
}

const oSize = {
    top: {
        main: "max-w-xs ",
        content: "h-24",
        image: "h-56",
    },
    left: {
        main: "h-52 w-full ",
        content: "",
        image: "min-w-[320px] max-w-[320px]",
    },
}

const Card = (props: ICard) => {
    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 = oSize[layout]

    return (
        <Link
            to={to}
            className={
                "card card-compact shadow-xl bg-base-100 text-neutral " +
                size.main +
                transition +
                cardside +
                className
            }
        >
            <div className={size.image}>
                <Image image={image} className="h-full w-full object-cover"/>
            </div>
            {title ? (
                <div className="card-body">
                    <h2 className="card-title uppercase">{title}</h2>
                    {content ? (
                        <p
                            className={`${size.content} text-ellipsis overflow-hidden text-justify`}
                            dangerouslySetInnerHTML={{ __html: content }}
                        ></p>
                    ) : null}
                </div>
            ) : null}
        </Link>
    )
}

export default Card