/// <reference types="react" />

import * as React from "react";

export interface ItemProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 样式类名的品牌前缀
   */
  prefix?: string;

  /**
   * 自定义类名
   */
  className?: string;

  /**
   * 自定义内联样式
   */
  style?: React.CSSProperties;

  /**
   * 面包屑节点内容
   */
  children?: React.ReactNode;

  /**
   * 面包屑节点链接，如果设置这个属性，则该节点为`<a />` ，否则是`<span />`
   */
  link?: string;
}

export class Item extends React.Component<ItemProps, any> {}

export interface KeywordProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 样式类名的品牌前缀
   */
  prefix?: string;

  /**
   * 自定义类名
   */
  className?: string;

  /**
   * 自定义内联样式
   */
  style?: React.CSSProperties;

  /**
   * 关键字内容
   */
  children?: React.ReactNode;
}

export class Keyword extends React.Component<KeywordProps, any> {}

export interface NumberProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 样式类名的品牌前缀
   */
  prefix?: string;

  /**
   * 自定义类名
   */
  className?: string;

  /**
   * 自定义内联样式
   */
  style?: React.CSSProperties;

  /**
   * 数字内容
   */
  children?: React.ReactNode;
}

export class Number extends React.Component<NumberProps, any> {}
export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 样式类名的品牌前缀
   */
  prefix?: string;

  /**
   * 自定义类名
   */
  className?: string;

  /**
   * 自定义内联样式
   */
  style?: React.CSSProperties;

  /**
   * 面包屑子节点 ，需传入 Breadcrumb.Item
   */
  children?: any;

  /**
   * 面包屑显示的最多个数，超出的部分会被隐藏
   */
  maxNode?: number;

  /**
   * 分隔符，可以是文本，也可以是 Icon
   */
  separator?: React.ReactNode;
}

export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
  static Item: typeof Item;
  static Keyword: typeof Keyword;
  static Number: typeof Number;
}