/**
 * Toolbar Component - Lynx 版 MUI Toolbar
 * 工具栏组件
 */
import './Toolbar.css'

export type ToolbarVariant = 'regular' | 'dense'

export interface ToolbarProps {
  /** 变体 */
  variant?: ToolbarVariant
  /** 是否禁用间距 */
  disableGutters?: boolean
  /** 子元素 */
  children?: any
  /** 自定义类名 */
  className?: string
  /** 内联样式 */
  style?: Record<string, any>
  /** sx 属性 */
  sx?: Record<string, any>
}

// 变体高度
const variantHeight: Record<ToolbarVariant, number> = {
  regular: 56,
  dense: 48,
}

export function Toolbar({
  variant = 'regular',
  disableGutters = false,
  children,
  className,
  style,
  sx,
  ...props
}: ToolbarProps) {
  const height = variantHeight[variant]

  const computedStyle: Record<string, any> = {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    position: 'relative',
    minHeight: height,
    ...(!disableGutters && { paddingLeft: 16, paddingRight: 16 }),
    ...sx,
    ...style,
  }

  const classes = [
    'MuiToolbar-root',
    `MuiToolbar-${variant}`,
    !disableGutters && 'MuiToolbar-gutters',
    className,
  ].filter(Boolean).join(' ')

  return (
    <view className={classes} style={computedStyle} {...props}>
      {children}
    </view>
  )
}

export default Toolbar