Feature.tsx

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

import Image from "./core/Image"
import Map from "./core/Map"
import Button from "./core/Button"

interface Props {
    title?: string
    content?: string
    image?: string | IGatsbyImageData
    mapid?: number
    layout?: "left" | "right"
    backgroundImage?: string
    action?: {
        name?: string
        url?: string
        className?: string
    }
    custom?: JSX.Element
}
interface FeatureComponentProps {
    image?: string | IGatsbyImageData
    mapid?: number
    custom?: JSX.Element
}

const oClassName = {
    left: {
        container: "flex-col lg:flex-row",
        content: "pt-10 lg:pl-10",
    },
    right: {
        container: "flex-col-reverse lg:flex-row-reverse",
        content: "pt-10 pb-10 lg:pr-10 lg:pb-0",
    },
}

const FeatureComponent = (props: FeatureComponentProps) => {
    const { image, mapid, custom } = props

    if (mapid) {
        return (
            <>
                <Map mapid={mapid} />
            </>
        )
    }

    if (image) {
        return (
            <>
                <Image image={image} />
            </>
        )
    }

    return <>{custom && custom}</>
}

const Feature = (props: Props) => {
    const {
        layout = "left",
        title = "",
        content = "",
        image,
        mapid,
        backgroundImage,
        action,
        custom,
    } = props

    const className = oClassName[layout]
    const bTextOnly = !(mapid || image || custom)
    const classNameContent = bTextOnly
        ? "grow"
        : `lg:w-1/2 ${className["content"]}`
    const classNameBackground = backgroundImage
        ? "bg-[url('" + backgroundImage + "')] bg-cover bg-no-repeat bg-center "
        : ""

    return (
        <div
            className={`flex ${className["container"]} ${classNameBackground}`}
        >
            {!bTextOnly && (
                <div className="h-[480px] lg:w-1/2">
                    <FeatureComponent
                        mapid={mapid}
                        image={image}
                        custom={custom}
                    />
                </div>
            )}
            <div className={classNameContent}>
                <h2 className="font-extrabold sm:text-4xl">{title}</h2>
                <p className="text-xl leading-8 pt-10 text-justify">
                    {content}
                </p>
                {action && (
                    <Button
                        {...action}
                        className={`mt-10 ${action.className}`}
                    />
                )}
            </div>
        </div>
    )
}

export default Feature