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

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

function button(): ReactElement {
  return (
    <Content>
      <div className="prose">
        <Link to="/doc/core">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;
    desc?: string;
    iconColor?: string;
    valueColor?: string;
    descColor?: string;
}`}
            </code>
          </pre>
        </div>

        <h2>Example</h2>
      </div>
      <div className="flex gap-6 m-4">
        <h2>Simple stat :</h2>
        <Stats title="Simple stat" value="99,9" desc="Without icon" />
        <Stats
          title="Simple stat"
          value="99,9"
          desc="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"
          desc="With bg color"
        />
        <Stats
          className="bg-secondary text-secondary-content"
          title="Simple stat"
          value="99,9"
          desc="With bg color"
        />
      </div>
      <div className="flex gap-6 m-4">
        <h2>Stat with colored value :</h2>
        <Stats
          title="Simple stat"
          value="99,9"
          desc="Colored value"
          valueColor="text-primary"
        />
        <Stats
          title="Simple stat"
          value="99,9"
          desc="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"
          desc="Colored description"
          descColor="text-primary"
        />
        <Stats
          title="Simple stat"
          value="99,9"
          desc="Colored description"
          descColor="text-secondary"
        />
      </div>
      <div className="flex gap-6 m-4">
        <h2>Stat with colored icon :</h2>
        <Stats
          title="Simple stat"
          value="99,9"
          desc="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"
          desc="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" desc="With element">
          <a href="https://daisyui.com/components/button/" className="btn btn-sm btn-success">Button</a>
        </Stats>
      </div>
      <div className="prose">
        <h2>More example</h2>
        <a href="https://daisyui.com/components/stat/">Daisy UI</a>
      </div>
    </Content>
  );
}

export default button;