import React, { ReactElement } from "react"

import { Button, Content, Link, Stats } from "@onegeo/gatsby-theme-onegeo"

function stats(): ReactElement {
    const stats = [{}] //dataDirectus.directus.stats;

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

                <h1>Stats</h1>
                <h2>Props</h2>
                <div className="mockup-code">
                    <pre>
                        <code>
                            {`interface Props {
    children?: React.ReactNode;
    className?: string;
    icon?: JSX.Element;
    title?: string;
    value?: string;
    description?: string;
    iconColor?: string;
    valueColor?: string;
    descriptionColor?: string;
}`}
                        </code>
                    </pre>
                </div>

                <h2>Example</h2>
            </div>
            <div className="flex gap-6 m-4">
                <h2>Stat with directus values :</h2>
                {stats.map((stat: any) => (
                    <div key={stat.id}>
                        <Stats
                            title={stat.title}
                            value={stat.value}
                            description={stat.description}
                        />
                    </div>
                ))}
            </div>
            <div className="flex gap-6 m-4">
                <h2>Simple stat :</h2>
                <Stats
                    title="Simple stat"
                    value="99,9"
                    description="Simple description"
                />
                <Stats
                    title="Simple stat"
                    value="99,9"
                    description="With icon"
                    icon={
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            className="inline-block w-8 h-8 stroke-current"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth="2"
                                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                            ></path>
                        </svg>
                    }
                />
            </div>
            <div className="flex gap-6 m-4">
                <h2>Stat with background color :</h2>
                <Stats
                    className="bg-primary text-primary-content"
                    title="Simple stat"
                    value="99,9"
                    description="With bg color"
                />
                <Stats
                    className="bg-secondary text-secondary-content"
                    title="Simple stat"
                    value="99,9"
                    description="With bg color"
                />
            </div>
            <div className="flex gap-6 m-4">
                <h2>Stat with colored value :</h2>
                <Stats
                    title="Simple stat"
                    value="99,9"
                    description="Colored value"
                    valueColor="text-primary"
                />
                <Stats
                    title="Simple stat"
                    value="99,9"
                    description="Colored value"
                    valueColor="text-secondary"
                />
            </div>
            <div className="flex gap-6 m-4">
                <h2>Stat with colored description :</h2>
                <Stats
                    title="Simple stat"
                    value="99,9"
                    description="Colored description"
                    descriptionColor="text-primary"
                />
                <Stats
                    title="Simple stat"
                    value="99,9"
                    description="Colored description"
                    descriptionColor="text-secondary"
                />
            </div>
            <div className="flex gap-6 m-4">
                <h2>Stat with colored icon :</h2>
                <Stats
                    title="Simple stat"
                    value="99,9"
                    description="Colored icon"
                    iconColor="text-primary"
                    icon={
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            className="inline-block w-8 h-8 stroke-current"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth="2"
                                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                            ></path>
                        </svg>
                    }
                />
                <Stats
                    title="Simple stat"
                    value="99,9"
                    description="Colored icon"
                    iconColor="text-secondary"
                    icon={
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            className="inline-block w-8 h-8 stroke-current"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth="2"
                                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                            ></path>
                        </svg>
                    }
                />
            </div>
            <div className="flex gap-6 m-4">
                <h2>Stat with element :</h2>
                <Stats title="Simple stat" value="99,9" description="With element">
                    <Button
                        url="https://daisyui.com/components/button/"
                        className="btn btn-sm btn-success"
                    >
                        Button
                    </Button>
                </Stats>
            </div>
            <div className="prose">
                <h2>More example</h2>
                <a href="https://daisyui.com/components/stat/">Daisy UI</a>
            </div>
        </Content>
    )
}

export default stats