import {
  Meta,
  Canvas,
  Title,
  Subtitle,
  Description,
  Primary,
  Controls,
  Stories,
  Story,
  Source,
} from '@storybook/blocks';
import * as ButtonStories from '../stories/button.stories';

import '../../../.storybook/docs'; // Import all documentation components

<Meta of={ButtonStories} />

# Button

<div className="component-summary">
  Buttons allow users to trigger actions or events with a single click or tap.
</div>

## Usage

<Canvas>
  <Story of={ButtonStories.Usage} />
  <Source of={ButtonStories.Usage} />
</Canvas>
<Controls of={ButtonStories.Usage} />

## Examples

<Stories of={ButtonStories} includePrimary={false} />

## Slots

<doc-slots-table
data={JSON.stringify([
{"name": "(default)", "description": "The button's label."},
{"name": "prefix", "description": "Used to prepend an icon or similar element to the button."},
{"name": "suffix", "description": "Used to append an icon or similar element to the button."}
])}>
</doc-slots-table>

## HTML Attributes / JS Properties

<doc-js-properties-table
data={JSON.stringify([
{"name": "variant", "description": "The button's visual style variant.", "type": "'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'", "defaultValue": "'default'", "reflects": true},
{"name": "size", "description": "The button's size.", "type": "'small' | 'medium' | 'large'", "defaultValue": "'medium'", "reflects": true},
{"name": "outline", "description": "Makes the button use outlined styles with a transparent background.", "type": "boolean", "defaultValue": "false", "reflects": true},
{"name": "disabled", "description": "Disables the button.", "type": "boolean", "defaultValue": "false", "reflects": true},
{"name": "caret", "description": "Adds a dropdown caret to the button.", "type": "boolean", "defaultValue": "false", "reflects": true},
{"name": "square", "description": "Makes the button square. Expects an icon in the default slot.", "type": "boolean", "defaultValue": "false", "reflects": true},
{"name": "loading", "description": "Shows a loading spinner inside the button and disables it.", "type": "boolean", "defaultValue": "false", "reflects": true},
{"name": "href", "description": "When set, the button will render as an <a> element with this value for its href attribute.", "type": "string", "defaultValue": "''", "reflects": false},
{"name": "target", "description": "Where to display linked URL for button as links. Only used when href is set.", "type": "string", "defaultValue": "''", "reflects": false},
{"name": "download", "description": "Causes the browser to download the linked URL instead of navigating to it. Only used when href is set.", "type": "string", "defaultValue": "''", "reflects": false},
{"name": "rel", "description": "The relationship of the linked URL as space-separated link types. Only used when href is set.", "type": "string", "defaultValue": "''", "reflects": false}
])}>
</doc-js-properties-table>

## Events

<doc-events-table
data={JSON.stringify([
// No custom events for the basic button implementation
])}>
</doc-events-table>

## Methods

<doc-methods-table
data={JSON.stringify([
// No custom methods for the basic button implementation
])}>
</doc-methods-table>

## Custom CSS Properties

<doc-css-custom-properties-table
data={JSON.stringify([
{"name": "--cod-btn-padding-x", "description": "The button's horizontal padding.", "defaultValue": "0.75em"},
{"name": "--cod-btn-padding-y", "description": "The button's vertical padding.", "defaultValue": "0.375em"},
{"name": "--cod-btn-font-family", "description": "The button's font family.", "defaultValue": ""},
{"name": "--cod-btn-font-size", "description": "The button's font size.", "defaultValue": "1em"},
{"name": "--cod-btn-font-weight", "description": "The button's font weight.", "defaultValue": "400"},
{"name": "--cod-btn-line-height", "description": "The button's line height.", "defaultValue": "1.5"},
{"name": "--cod-btn-color", "description": "The button's text color.", "defaultValue": "var(--cod-body-color)"},
{"name": "--cod-btn-bg", "description": "The button's background color.", "defaultValue": "transparent"},
{"name": "--cod-btn-border-width", "description": "The button's border width.", "defaultValue": "var(--cod-border-width)"},
{"name": "--cod-btn-border-color", "description": "The button's border color.", "defaultValue": "transparent"},
{"name": "--cod-btn-border-radius", "description": "The button's border radius.", "defaultValue": "var(--cod-border-radius)"},
{"name": "--cod-btn-hover-border-color", "description": "The button's border color on hover.", "defaultValue": "transparent"},
{"name": "--cod-btn-box-shadow", "description": "The button's box shadow.", "defaultValue": "inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075)"},
{"name": "--cod-btn-disabled-opacity", "description": "The button's opacity when disabled.", "defaultValue": "0.65"},
{"name": "--cod-btn-focus-box-shadow", "description": "The button's box shadow when focused.", "defaultValue": "0 0 0 0.25em rgba(var(--cod-btn-focus-shadow-rgb), 0.5)"}
])}>
</doc-css-custom-properties-table>

## CSS Parts

<doc-css-parts-table
data={JSON.stringify([{
"name": "base", "description": "The component's base wrapper.",
}])}>
</doc-css-parts-table>

## Dependencies

<doc-dependencies-list data={JSON.stringify(["cod-spinner"])}></doc-dependencies-list>

## Accessibility

Button components are designed to be accessible by default:

- Buttons have appropriate roles based on their usage
- When a button is disabled, both the `disabled` attribute and `aria-disabled="true"` are applied
- Buttons can be navigated and activated using a keyboard
- Loading buttons maintain their width to prevent layout shifts
- When used as links, buttons maintain all native functionality and behavior