import { useState } from "react"
import { Button } from "blue-react"

export default function BasicUsageExample() {
    const [count, setCount] = useState(0)

    return (
        <>
            <Button label="Click me" onClick={() => setCount(count + 1)} />

            <p>You have clicked the button {count} times.</p>
        </>
    )
}

import { useState } from "react"
import { Button } from "blue-react"

function delay(ms: number): Promise<void> {
    return new Promise((resolve) => setTimeout(resolve, ms))
}

export default function BusyWhenClickExample() {
    const [busy, setBusy] = useState(false)

    return (
        <Button
            busy={busy}
            onClick={async () => {
                setBusy(true)
                await delay(3000)
                setBusy(false)
            }}
        >
            Click me
        </Button>
    )
}

import { Button } from "blue-react"

export default function IsActiveExample() {
    return <Button label="I am active" active />
}

import { useState } from "react"
import { Button } from "blue-react"

export default function SuccessExample() {
    const [success, setSuccess] = useState(false)

    return (
        <Button
            label="Click for success"
            onClick={() => {
                setSuccess(true)
            }}
            success={success}
        />
    )
}

import { Button } from "blue-react"

export default function Variants() {
    return (
        <div className="vstack gap-2">
            <div className="hstack gap-2">
                <Button label="Default is plain and secondary" />
                <Button label="Make button look like menu item" variant="menu-item" />
                <Button label="Make button look like a link" variant="link" />
            </div>
            <div className="hstack gap-2">
                <Button label="Primary" color="primary" />
                <Button label="Secondary" />
                <Button label="Success" color="success" />
                <Button label="Danger" color="danger" />
                <Button label="Warning" color="warning" />
                <Button label="Info" color="info" />
                <Button label="Light" color="light" />
                <Button label="Dark" color="dark" />
            </div>
            <div className="hstack gap-2">
                <Button label="Primary" color="primary" variant="plain" />
                <Button label="Secondary" variant="plain" />
                <Button label="Success" color="success" variant="plain" />
                <Button label="Danger" color="danger" variant="plain" />
                <Button label="Warning" color="warning" variant="plain" />
                <Button label="Info" color="info" variant="plain" />
                <Button label="Light" color="light" variant="plain" />
                <Button label="Dark" color="dark" variant="plain" />
            </div>
            <div className="hstack gap-2">
                <Button label="Primary" color="primary" variant="filled" />
                <Button label="Secondary" variant="filled" />
                <Button label="Success" color="success" variant="filled" />
                <Button label="Danger" color="danger" variant="filled" />
                <Button label="Warning" color="warning" variant="filled" />
                <Button label="Info" color="info" variant="filled" />
                <Button label="Light" color="light" variant="filled" />
                <Button label="Dark" color="dark" variant="filled" />
            </div>
            <div className="hstack gap-2">
                <Button label="Primary" color="primary" variant="outline" />
                <Button label="Secondary" variant="outline" />
                <Button label="Success" color="success" variant="outline" />
                <Button label="Danger" color="danger" variant="outline" />
                <Button label="Warning" color="warning" variant="outline" />
                <Button label="Info" color="info" variant="outline" />
                <Button label="Light" color="light" variant="outline" />
                <Button label="Dark" color="dark" variant="outline" />
            </div>
            <div className="hstack gap-2">
                <Button label="Primary" color="primary" variant="link" />
                <Button label="Secondary" variant="link" />
                <Button label="Success" color="success" variant="link" />
                <Button label="Danger" color="danger" variant="link" />
                <Button label="Warning" color="warning" variant="link" />
                <Button label="Info" color="info" variant="link" />
                <Button label="Light" color="light" variant="link" />
                <Button label="Dark" color="dark" variant="link" />
            </div>
        </div>
    )
}

import { ArrowRight, Backpack } from "react-bootstrap-icons"
import { Button } from "blue-react"

export default function WithIcon() {
    return (
        <div className="hstack gap-2">
            <Button iconBefore={<Backpack />} label="Button with icon before text" />
            <Button label="Button with icon after text" iconAfter={<ArrowRight />} />
            <Button label="Icon will transform on hover" className="icon-link-hover" iconAfter={<ArrowRight />} />
        </div>
    )
}