import React, { createElement, CSSProperties, ComponentType, ReactNode } from 'react'
import cln from 'classnames'

import { usePrefix } from '../ConfigProvider'

type ComponentProps = Exclude<Props, 'as'>

export type Props = {
  children: ReactNode
  className?: string
  style?: CSSProperties
  /**
   * 跳转地址
   */
  href?: string
  /**
   * 根组件类型
   *
   * 该属性可以指定组件内部根节点的组件类型，可以是 React 组件或者 HTML element
   */
  as?: ComponentType<ComponentProps> | 'a'
}

// TODO as 的目标需要处理 href 的情况，探索下能否去掉 as，改成有 href 再 as，比如 linkAs
export default function Item({ className, as, href, ...props }: Props) {
  const prefix = usePrefix('breadcrumb-item')
  className = cln(prefix, className)

  if (as) {
    return createElement(as, {
      className,
      href,
      ...props
    })
  }

  if (href == null) {
    return <span className={className} {...props} />
  }

  return <a className={className} href={href} {...props} />
}