import React, { ReactElement } from "react";
import { Link } from "gatsby";

import { Content } from "@onegeo/gatsby-theme-onegeo";
import { Feature } from "@onegeo/gatsby-theme-onegeo";

function feature(): ReactElement {

  return (
    <Content>
      <div className="prose">
        <Link to="/doc">Retour</Link>

        <h1>Feature</h1>
        <h2>Props</h2>
        <div className="mockup-code">
          <pre>
            <code>
              {`
interface FeatureProps {
title?: string;
content?: string;
image?: string | IGatsbyImageData;
idMap?: number;
layout?: 'left' | 'right';
backgroundImage?: string;
action?: {
  title?: string;
  to?: string;
  className?: string;
};
custom?: JSX.Element;
}`}
            </code>
          </pre>
        </div>

        <h2>Example</h2>
      </div>
      <div className="mt-10">
        <h1 className="text-2xl font-semibold p-4">Custom component</h1>
        <Feature
          title="Action"
          content="Action description for the Button"
          layout="left"
          custom={<div>Custom component</div>}
          action={{
            to: '#',
            title: 'Action'
          }}
        />
      </div>
      <div className="mt-10">
        <h1 className="text-2xl font-semibold p-4">Image</h1>
        <Feature
          title="Action"
          content="Action description for the Button"
          layout="right"
          image="https://fakeimg.pl/480x480/"
          action={{
            to: '#',
            title: 'Action'
          }}
        />
      </div>
      <div className="mt-10">
        <h1 className="text-2xl font-semibold p-4">Text only</h1>
        <Feature
          title="Action"
          content="Action description for the Button"
          action={{
            to: '#',
            title: 'Action'
          }}
        />
      </div>
      <div className="mt-10">
        <h1 className="text-2xl font-semibold p-4">Map</h1>
        <Feature
          title="Action"
          content="Action description for the Button"
          action={{
            to: '#',
            title: 'Action'
          }}
          layout="left"
          idMap={109}
        />
      </div>
    </Content>
  );
}

export default feature;