import React, { ReactElement } from "react"
import { Content,Link,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