import { Callout, Card, CardGroup, Tabs, Tab, Steps, Step } from "@barodoc/theme-docs/components/mdx";
import { ApiEndpoint, ApiParams, ApiParam, ApiResponse } from "@barodoc/theme-docs/components/api";

<Callout type="info" title="Note">
  This is an informational callout.
</Callout>

<Callout type="warning" title="Caution">
  Be careful with this operation.
</Callout>

<Callout type="tip" title="Pro Tip">
  Here's a helpful suggestion.
</Callout>

<Callout type="danger" title="Warning">
  This action cannot be undone.
</Callout>

<Card title="Getting Started" icon="🚀" href="/docs/quickstart">
  Learn how to set up your first documentation site.
</Card>

<Card title="Configuration" icon="⚙️">
  Configure your site settings and navigation.
</Card>

<CardGroup cols={2}>
  <Card title="Installation" href="/docs/install">
    Install Barodoc in your project.
  </Card>
  <Card title="Configuration" href="/docs/config">
    Configure your documentation site.
  </Card>
</CardGroup>

<Tabs items={[
  { label: "npm", value: "npm", children: <code>npm install barodoc</code> },
  { label: "pnpm", value: "pnpm", children: <code>pnpm add barodoc</code> },
  { label: "yarn", value: "yarn", children: <code>yarn add barodoc</code> },
]} defaultValue="pnpm" />

interface TabItem {
  label: string;    // Tab button text
  value: string;    // Unique identifier
  children: ReactNode;  // Tab content
}

<Steps>
  <Step title="Install dependencies">
    Run `npm install` to install all required packages.
  </Step>
  <Step title="Configure settings">
    Create `barodoc.config.json` with your site settings.
  </Step>
  <Step title="Start development">
    Run `barodoc serve` to start the development server.
  </Step>
</Steps>

<CodeGroup>
```javascript title="JavaScript"
const config = require('./config');

import config from './config';

<ApiEndpoint method="GET" path="/api/users/{id}" description="Retrieve a user by ID">
  Returns a single user object.
</ApiEndpoint>

<ApiEndpoint method="POST" path="/api/users" description="Create a new user">
  Creates a user and returns the created object.
</ApiEndpoint>

<ApiParams>
  <ApiParam name="id" type="string" required>
    User ID
  </ApiParam>
  <ApiParam name="email" type="string" required>
    User email address
  </ApiParam>
  <ApiParam name="name" type="string">
    Display name (optional)
  </ApiParam>
</ApiParams>

<ApiResponse status={200}>
```json
{
  "id": "usr_123",
  "email": "user@example.com",
  "name": "John Doe"
}

import { ThemeToggle } from "@barodoc/theme-docs";

<ThemeToggle />

import { Search } from "@barodoc/theme-docs";

<Search />

---
import { BaseLayout } from "@barodoc/theme-docs/layouts/BaseLayout.astro";
---

<BaseLayout title="Page Title" description="Page description">
  <main>Content</main>
</BaseLayout>

---
import { DocsLayout } from "@barodoc/theme-docs/layouts/DocsLayout.astro";
---

<DocsLayout
  title="Getting Started"
  description="Learn how to get started"
  headings={headings}
>
  <Content />
</DocsLayout>

---
title: API Reference
description: Complete API documentation
---

import { Callout, Card, CardGroup, Steps, Step } from "@barodoc/theme-docs/components/mdx";
import { ApiEndpoint, ApiParams, ApiParam, ApiResponse } from "@barodoc/theme-docs/components/api";

# API Reference

<Callout type="info">
  All API endpoints require authentication.
</Callout>

## Authentication

<ApiEndpoint method="POST" path="/api/auth/login" description="Authenticate user">
  <ApiParams>
    <ApiParam name="email" type="string" required>
      User email
    </ApiParam>
    <ApiParam name="password" type="string" required>
      User password
    </ApiParam>
  </ApiParams>

  <ApiResponse status={200}>
    ```json
    { "token": "eyJhbGc..." }
    ```
  </ApiResponse>
</ApiEndpoint>

## Quick Start

<Steps>
  <Step title="Get API Key">
    Sign up at the dashboard to get your API key.
  </Step>
  <Step title="Install SDK">
    Install our SDK using your package manager.
  </Step>
  <Step title="Make First Request">
    Use the code samples below to make your first API call.
  </Step>
</Steps>

## Related Resources

<CardGroup cols={2}>
  <Card title="SDK Reference" icon="📚" href="/docs/sdk">
    Full SDK documentation
  </Card>
  <Card title="Examples" icon="💡" href="/docs/examples">
    Code examples and tutorials
  </Card>
</CardGroup>