import React, { ReactElement } from "react"
import { Content, Link, Card, Events } 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 IStyle {
    main: string
    description: string
    image: string
}

interface CardProps {
    children?: React.ReactNode
    name?: string
    description?: string
    image?: string
    url?: string
    anime?: boolean
    layout?: "top" | "left" | "full"
    className?: string
    size?: "xs" | "base" | "xl"
    style?: IStyle
}`}
                        </code>
                    </pre>
                </div>

                <h2>Example</h2>
            </div>
            <div className="flex flex-col gap-4 m-4">
                {[1, 2, 3].map(() => {
                    return (
                        <Card
                            url="#"
                            name="Action"
                            description="Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le faux-texte dès qu'il est prêt ou que la "
                            layout="left"
                            size="xs"
                            image="mock"
                        />
                    )
                })}
            </div>
            <div className="flex gap-6 m-4">
                {[1, 2, 3].map(() => {
                    return (
                        <Card
                            url="#"
                            name="Action"
                            description="Action description for the Button"
                            image="mock"
                        />
                    )
                })}
            </div>
            <div className="flex gap-6 m-4">
                {[1, 2, 3].map(() => {
                    return (
                        <Card
                            url="#"
                            name="Action"
                            description="Action description for the Button"
                            image="mock"
                            layout="full"
                        />
                    )
                })}
            </div>
            <div className="flex gap-6 m-4">
                <Card
                    url="#"
                    name="Action"
                    description="Action whith icon on top for the Button"
                    layout="left"
                    image="mock"
                />
            </div>
            <div className="flex gap-6 m-4">
                <Card
                    name="Action"
                    description="Action whith icon on top for the Button"
                    layout="left"
                    image="mock"
                    anime={false}
                    className="shadow-none"
                />
            </div>
            <div className="flex gap-6 m-4">
                <Card
                    style={{
                        main: "card-side h-52 w-full h-auto",
                        description: "",
                        image: "min-w-[320px] max-w-[320px]",
                    }}
                    anime={false}
                >
                    <Events />
                </Card>
            </div>
        </Content>
    )
}

export default card