import { h, type FunctionComponent } from 'preact'
import cn from 'classnames'

export default function linkButtonFactory({ defaults, icons, styles }) {
  const LinkButton: FunctionComponent<{
    autoHeight?: boolean
    className?: string
    color?: string
    design?: string
    href?: string
    fullWidth?: boolean
    icon?: string
    iconSize?: string
    invert?: boolean
    size?: string
    tabIndex?: number
    title?: string
  }> = ({
    autoHeight = defaults?.autoHeight,
    children,
    className,
    color = defaults?.color,
    design = defaults?.design,
    href,
    fullWidth = defaults?.fullWidth,
    icon = defaults?.icon,
    iconSize,
    invert = defaults?.invert,
    size = defaults?.size,
    tabIndex,
    title,
  }) => (
    <a
      className={cn(
        styles.base,
        design && styles[design],
        size && styles[size],
        color && styles[color],
        autoHeight && styles.autoHeight,
        fullWidth && styles.fullWidth,
        invert && styles.invert,
        className,
      )}
      style={iconSize && { '--icon-size': iconSize }}
      href={href}
      tabIndex={tabIndex}
      title={title}
    >
      {icon && <i className={styles.icon} style={{ maskImage: `url(${icons[icon] || icon})` }} />}
      {children && <span>{children}</span>}
    </a>
  )

  return LinkButton
}