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"
    size?: "xs" | "base" | "xl"
}

const oClass = {
    top_base: {
        main: "max-w-xs ",
        content: "h-24",
        image: "h-56",
    },
    left_base: {
        main: "card-side h-52 w-full ",
        content: "",
        image: "min-w-[320px] max-w-[320px]",
    },
    left_xs: {
        main: "card-side h-28 w-full ",
        content: "line-clamp-2",
        image: "min-w-[80px] max-w-[100px]",
    },
}

const Card = (props: ICard) => {
    const {
        to = "#",
        className = "",
        anime = true,
        title,
        content,
        image,
        layout = "top",
        size = "base",
    } = props

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

    const oclass = oClass[layout + "_" + size] || oClass["top_base"]

    return (
        <Link
            to={to}
            className={
                "card card-compact shadow-xl bg-base-100 text-neutral " +
                oclass.main +
                transition +
                className
            }
        >
            <div className={oclass.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 ? (
                        <div
                            className={
                                "text-justify text-ellipsis overflow-hidden " +
                                oclass.content
                            }
                            dangerouslySetInnerHTML={{ __html: content }}
                        />
                    ) : null}
                </div>
            ) : null}
        </Link>
    )
}

export default Card