import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

import { Examples, Example, Note, Title, CustomArgsTable } from "@calcom/storybook/components";

import { Breadcrumb, BreadcrumbItem } from "./Breadcrumb";

<Meta title="UI/Breadcrumbs" component={Breadcrumb} />

<Title title="Breadcrumbs" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />

## Structure

<CustomArgsTable of={Breadcrumb} />

<Examples title="Breadcrumb style">
  <Example title="Primary">
    <Breadcrumb>
      <BreadcrumbItem href="/">Home</BreadcrumbItem>
      <BreadcrumbItem href="/">Test</BreadcrumbItem>
    </Breadcrumb>
  </Example>
</Examples>

## Usage

When hovering over the button, there should be a tooltip to explain the context of the button, so the user can understand the result of action.