import { Meta, Markdown } from '@storybook/blocks';
import * as Stories from './index.stories';

<Meta of={Stories} />

# Button: Interactive Component

The `Button` component is a versatile, production-ready button with multiple variants, sizes, and built-in navigation support. It provides a consistent interface for user interactions throughout the application and integrates seamlessly with React Router for navigation.

---

## I. Component Usage

The component renders a `<button>` element wrapped in a `<label>` for proper styling. It supports various visual styles, sizes, and can act as both a standard button and a navigation link.

### Basic Example

<Markdown>
{`
\`\`\`tsx
import { Button } from '@emingy/core/ui';

// Simple button with onClick

<Button type="primary" size="md" onClick={() => console.log('Clicked!')}>
    Submit
</Button>

// Button with navigation

<Button type="secondary" href="/dashboard">
    Go to Dashboard
</Button>

// Button with prefix and postfix

<Button type="primary" prefix="$" postfix="USD">
    100
</Button>

// Splitted button with additional action

<Button type="primary" splitted>
    Save
</Button>

// Loading state

<Button type="primary" isLoading={true}>
    Saving...
</Button>

// Full width button

<Button type="primary" isFullWidth>
  Submit Form
</Button>
\`\`\`
`}
</Markdown>

---

## II. Component Props

The `Button` component accepts standard HTML button attributes, plus specific props to control appearance and behavior.

<Markdown>
    {`
| Prop Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| **\`type\`** | \`'primary'\` \\| \`'secondary'\` \\| \`'ghosted'\` \\| \`'outlined'\` \\| \`'alert'\` | \`'primary'\` | Visual style variant of the button. |
| **\`size\`** | \`'sm'\` \\| \`'md'\` \\| \`'lg'\` | \`'md'\` | Size of the button. |
| **\`disabled\`** | \`boolean\` | \`false\` | Disables button interaction and applies disabled styling. |
| **\`htmlType\`** | \`'button'\` \\| \`'submit'\` \\| \`'reset'\` | \`'button'\` | Native HTML button type attribute. |
| **\`prefix\`** | \`ReactNode\` | | Content displayed before the button text (e.g., icon, symbol). |
| **\`postfix\`** | \`ReactNode\` | | Content displayed after the button text (e.g., icon, badge). |
| **\`splitted\`** | \`boolean\` | \`false\` | Enables split button mode with an additional action button. |
| **\`isLoading\`** | \`boolean\` | \`false\` | Shows spinner and disables the button. Hides button text while loading. |
| **\`isFullWidth\`** | \`boolean\` | \`false\` | Makes the button take the full width of its container. |
| **\`href\`** | \`string\` | | Navigation path. When provided, clicking the button navigates using React Router. |
| **\`navigateOptions\`** | \`NavigateOptions\` | | Options passed to React Router's navigate function (e.g., \`replace\`, \`state\`). |
| **\`onClick\`** | \`(e: MouseEvent) => void\` | | Click event handler. Fires before navigation if \`href\` is provided. |
| **\`className\`** | \`string\` | | Additional CSS classes for custom styling. |
| **\`children\`** | \`ReactNode\` | | Button text or content. |
`}
</Markdown>

---

## III. Button Types

The component supports four visual variants:

<Markdown>
    {`
- **Primary** (\`type="primary"\`): Main action button with solid background.
- **Secondary** (\`type="secondary"\`): button with secondary style.
- **Ghosted** (\`type="ghosted"\`): Subtle button with minimal styling.
- **Outlined** (\`type="outlined"\`): button with outlined style.
- **Alert** (\`type="alert"\`): Warning or destructive action button (e.g., delete, cancel).
`}
</Markdown>

---

## IV. Button Sizes

Three size options are available:

<Markdown>
    {`
- **Small** (\`size="sm"\`): Compact button for dense layouts.
- **Medium** (\`size="md"\`): Default size for most use cases.
- **Large** (\`size="lg"\`): Prominent button for primary actions.
`}
</Markdown>

---

## V. Navigation

The `Button` component integrates with React Router for client-side navigation:

<Markdown>
{`
\`\`\`tsx
// Simple navigation
<Button href="/profile">View Profile</Button>

// Navigation with options

<Button href="/settings" navigateOptions={{ replace: true, state: { from: 'dashboard' } }}>
    Settings
</Button>

// Navigation with onClick (both fire)

<Button
  href="/save"
  onClick={() => console.log('Saving...')}
>
  Save and Continue
</Button>
\`\`\`
`}
</Markdown>

**Note:** When `href` is provided, the `onClick` handler executes first, then navigation occurs. Ensure the component is wrapped in a React Router context (e.g., `BrowserRouter`, `MemoryRouter`).

---

## VI. Splitted Button

The `splitted` prop enables a split button with two clickable areas:

<Markdown>
    {`
\`\`\`tsx
<Button type="primary" splitted>
  Save
</Button>
\`\`\`
`}
</Markdown>

This creates a button with:

- **Main area**: Executes the primary action
- **Secondary area** (right side with "-"): For additional options or actions

---

## VII. Loading State

The `isLoading` prop shows a loading spinner and disables the button:

<Markdown>
{`
\`\`\`tsx
import { useState } from 'react';

function SubmitForm() {
const [isLoading, setIsLoading] = useState(false);

const handleSubmit = async () => {
setIsLoading(true);
try {
await saveData();
} finally {
setIsLoading(false);
}
};

return (

<Button onClick={handleSubmit} isLoading={isLoading}>
    Submit
</Button>
); }

// Loading state with navigation

<Button href="/dashboard" isLoading={isLoading}>
    Go to Dashboard
</Button>

// Loading state with different types

<Button type="primary" isLoading={true}>
    Saving...
</Button>

<Button type="secondary" isLoading={true}>
  Loading...
</Button>
\`\`\`
`}
</Markdown>

**Behavior when `isLoading={true}`:**

- The button becomes disabled and cannot be clicked
- A spinner is displayed in place of the button text
- The button text is hidden but maintains the button's dimensions
- Navigation is prevented even if `href` is provided
- The spinner inherits the button's text color

---

## VIII. Full Width Mode

The `isFullWidth` prop makes the button expand to fill the full width of its container:

<Markdown>
{`
\`\`\`tsx
// Full width button
<Button type="primary" isFullWidth>
  Continue
</Button>

// Full width in a form

<form style={{ maxWidth: '400px' }}>
    <Button type="primary" isFullWidth htmlType="submit">
        Submit Form
    </Button>
</form>

// Full width with loading state

<Button type="secondary" isFullWidth isLoading={isSubmitting}>
  Processing...
</Button>
\`\`\`
`}
</Markdown>

**Behavior when `isFullWidth={true}`:**

- The button's wrapper expands to 100% of the parent container width
- Useful for forms, mobile layouts, and modal dialogs
- Works with all button types, sizes, and states
- The button itself remains centered within the full-width wrapper

---

## IX. Important Notes

<Markdown>
    {`
- The button is wrapped in a \`<label>\` element for styling purposes.
- When \`disabled={true}\` or \`isLoading={true}\`, the button cannot be clicked and navigation is prevented.
- The \`isLoading\` prop automatically disables the button, shows a spinner, and hides the text.
- The \`isFullWidth\` prop makes the button wrapper expand to the full width of its container.
- The \`prefix\` and \`postfix\` props accept any React node (text, icons, components).
- The \`htmlType\` prop sets the native HTML button type (useful for forms).
- Custom styling can be added via the \`className\` prop.
- For navigation to work, the application must be wrapped in a React Router provider.
`}
</Markdown>
