Feature.tsx

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

import CardImage from "./core/card/CardImage";
import Map from "./core/Map";


interface Props {
  title?: string;
  content?: string;
  image?: string | IGatsbyImageData;
  idMap?: number;
  layout?: 'left' | 'right';
  backgroundImage?: string;
  action?: {
    label: string;
    to: string;
  };
  custom?: JSX.Element;
}
interface FeatureComponentProps {
  image?: string | IGatsbyImageData;
  idMap?: 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,
    idMap,
    custom
  } = props;

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

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

  return (
    <>
      {custom && custom}
    </>
  );
}


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

  const className = oClassName[layout];
  const bTextOnly = ( ! (idMap || 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 
              idMap={idMap}
              image={image}
              custom={custom}
            />
          </div>
        )
      }
      <div className={classNameContent}>
        <h2 className="font-extrabold sm:text-4xl">{title}</h2>
        <p className="text-xl text-gray-500 leading-8 pt-10 text-justify">{content}</p>
        {
          action && (
            <Link 
              to={action.to}
              className="btn btn-active mt-10"
            >
              {action.label}
            </Link>
          )
        }
      </div>
    </div>
  );
};

export default Feature;