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

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

function card(): ReactElement {
  return (
    <Content>
      <div className="prose">
        <Link to="/doc/core">Retour</Link>

        <h1>Card</h1>
        <h2>Props</h2>
        <div className="mockup-code">
          <pre>
            <code>
              {`interface CardProps {
  title?: string;
  content?: string;
  image?: string | IGatsbyImageData;
  to?: string;
  anime?: boolean;
  layout?: "top" | "left";
  className?: string;
}`}
            </code>
          </pre>
        </div>

        <h2>Example</h2>
      </div>
      <div className="flex gap-6 m-4">
        <Card
          title="Action"
          content="Action description for the Button"
        />
        <Card
          title="Action"
          content="Action without animation for the Button"
          anime={false}
        />
      </div>
      <div className="flex gap-6 m-4">
        <Card
          title="Action"
          content="Action whith icon on top for the Button"
          layout="left"
        />
      </div>
    </Content>
  );
}

export default card;