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

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

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

        <h1>Button</h1>
        <h2>Props</h2>
        <div className="mockup-code">
          <pre>
            <code>
              {`interface Props {
    children?: React.ReactNode;
    title?: string;
    to?: string;
    className?: string;
}`}
            </code>
          </pre>
        </div>

        <h2>Example</h2>
      </div>
      <div className="flex gap-6 m-4">
        <Button title="A Button..." />
        <Button title="A Primary Button..." className="btn-primary btn-lg" />
        <Button
          title="A Secondary Button..."
          className="btn-secondary btn-xl"
        />
        <Button title="A Accent Button..." className="btn-accent btn-sm" />
        <Button className="btn-ghost btn-xs">A Ghost Button</Button>
      </div>
      <div className="prose">
        <h2>More example</h2>
        <a href="https://daisyui.com/components/button/">Daisy UI</a>
      </div>
    </Content>
  );
}

export default button;