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

interface IStyle {
    main: string
    description: string
    image: string
}

export interface ICard extends Iimage {
    children?: React.ReactNode
    name?: string
    description?: string
    url?: string
    anime?: boolean
    layout?: "top" | "left" | "full"
    size?: "xs" | "base" | "xl"
    style?: IStyle
}

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

const CardPanel = (props: ICard) => {
    const {
        children,
        className = "",
        anime = true,
        layout = "top",
        name,
        description,
        image,
        size = "base",
        style,
    } = props

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

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

    return (
        <div
            className={
                "card card-compact shadow-md bg-base-100 text-neutral " +
                oclass.main +
                " " +
                transition +
                " " +
                className
            }
        >
            {image ? (
                <div className={oclass.image}>
                    <Image
                        image={image}
                        className="h-full w-full object-cover"
                    />
                </div>
            ) : null}
            <div className="card-body">
                {name ? (
                    <h2 className={"card-title uppercase " + oclass.title}>
                        {name}
                    </h2>
                ) : null}
                {description ? (
                    <div
                        className={
                            "text-justify text-ellipsis overflow-hidden " +
                            oclass.description
                        }
                        dangerouslySetInnerHTML={{ __html: description }}
                    />
                ) : null}
                {children}
            </div>
        </div>
    )
}

const Card = (props: ICard) => {
    const { url } = props

    return url ? (
        <Link to={url} className="w-full">
            <CardPanel {...props} />
        </Link>
    ) : (
        <CardPanel {...props} />
    )
}

export default Card