import Layout from '../../components/Layout'
import { ComponentsSidebar } from '../../sidebars'
import { Playground } from '../../components/Playground';
import SyntaxHighlighter from '../../components/SyntaxHighlighter';

export default function Badges() {
    return (
        <Layout
            title="Badges & Pills"
            showHero
            description="The Badge and Pill components are labels with a background color."
            sidebar={ComponentsSidebar}
        >
            <ul className="list">
                <li><strong>Badge:</strong> Used for state and text. Slightly rounded corners.</li>
                <li><strong>Pill:</strong> Used only for numbers. Circular.</li>
            </ul>

            <h2>Badge</h2>
            <p>The <code>Badge</code> component should only be used for state and general text labels. Not for numbers.</p>
            <p>
                Badges are either subtle or bold and use color to indicate meanings that users can learn and recognize across products. Change the badge's appearance to bold by setting isBold
            </p>
            <h3>Default</h3>
            <p>
                Use default badges for a general status or state, such as: to do, unavailable, minor, not started.
            </p>
            <Playground
                codeText={`<div>
    <div>
        <Badge>Default</Badge>
    </div>
    <div>
        <Badge isBold>Default Bold</Badge>
    </div>
</div>`}
            />
            <h3>Success</h3>
            <p>Use <code>success</code> badges to represent a constructive status or state, such as: operational, available, done, approved, added.</p>
            <Playground
                codeText={`<div>
    <div>
        <Badge appearance="success">Success</Badge>
    </div>
    <div>
        <Badge appearance="success" isBold>Success Bold</Badge>
    </div>
</div>`}
            />

            <h3>Removed</h3>
            <p>Use <code>removed</code> badges to represent a critical or problematic status or state, such as: errors, declined, failed, removed, critical.</p>
            <Playground
                codeText={`<div>
    <div>
        <Badge appearance="removed">Removed</Badge>
    </div>
    <div>
        <Badge appearance="removed" isBold>Removed Bold</Badge>
    </div>
</div>`}
            />

            <h3>In progress</h3>
            <p>Use <code>inprogress</code> badges to represent an in progress or current status or state, such as: in progress, open, modified.</p>
            <Playground
                codeText={`<div>
    <div>
        <Badge appearance="inprogress">In progress</Badge>
    </div>
    <div>
        <Badge appearance="inprogress" isBold>In progress Bold</Badge>
    </div>
</div>`}
            />

            <h3>New</h3>
            <p>Use <code>new</code> badges to represent a new status or state, such as: trial, new, created, information, help.</p>
            <Playground
                codeText={`<div>
    <div>
        <Badge appearance="new">New</Badge>
    </div>
    <div>
        <Badge appearance="new" isBold>New Bold</Badge>
    </div>
</div>`}
            />

            <h3>Moved</h3>
            <p>Use <code>moved</code> badges to represent a status or state for items that have been changed and require attention, such as: busy, blocked, missing, warning.</p>
            <Playground
                codeText={`<div>
    <div>
        <Badge appearance="moved">moved</Badge>
    </div>
    <div>
        <Badge appearance="moved" isBold>moved Bold</Badge>
    </div>
</div>`}
            />

            <h2>Pill</h2>
            <p>The <code>Pill</code> component should only be used for numbers.</p>

            <Playground
                codeText={`<div>
    <div>
        <Pill>0</Pill>
    </div>
    <div>
        <Pill appearance="removed" isBold>24</Pill>
    </div>
</div>`}
            />
        </Layout>
    )
}