import { h } from 'preact'
import type { ComponentChildren } from 'preact'

export type MenuItemProps = {
  icon?: ComponentChildren
  children: ComponentChildren
  onClick: () => void
  disabled?: boolean
}

export default function MenuItem ({ icon, children, onClick, disabled = false }: MenuItemProps) {
  return (
    <div
      className={`menuitem ${disabled ? 'disabled' : ''}`}
      tabIndex={disabled ? -1 : 0}
      style={{
        width: 'auto', // Width fits content
        minWidth: 'var(--space-24)', // Minimum width like IconButton
        height: 'var(--space-24)', // Fixed height like IconButton
        border: 'var(--border-width-1) solid transparent',
        borderRadius: 'var(--border-radius-4)',
        cursor: disabled ? 'not-allowed' : 'pointer',
        backgroundColor: 'transparent',
        color: disabled ? 'var(--figma-color-icon-disabled)' : 'var(--figma-color-icon)',
        transition: 'background-color 0.1s ease, border-color 0.1s ease',
        padding: '0 var(--space-8)',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 'var(--space-8)',
        whiteSpace: 'nowrap'
      }}
      onClick={disabled ? undefined : onClick}
      onKeyDown={(e) => {
        if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
          e.preventDefault()
          onClick()
        }
      }}
    >
      {icon && (
        <div
          style={{
            width: 'var(--space-16)',
            height: 'var(--space-16)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexShrink: 0,
            color: 'inherit'
          }}
        >
          {icon}
        </div>
      )}
      <div
        style={{
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          fontSize: 'var(--font-size-12)',
          fontFamily: 'var(--font-family)',
          fontWeight: 'var(--font-weight-normal)',
          color: disabled ? 'var(--figma-color-text-disabled)' : 'var(--figma-color-text)'
        }}
      >
        {children}
      </div>

      <style>{`
        .menuitem:not(.disabled):hover {
          background-color: var(--figma-color-bg-hover, #e0e0e0) !important;
        }
        .menuitem:not(.disabled):focus-visible {
          border-color: var(--figma-color-border-selected, #007acc) !important;
          outline: none !important;
        }
        .menuitem:not(.disabled):active {
          background-color: var(--figma-color-bg-hover, #d0d0d0) !important;
        }

        .menuitem {
          box-sizing: border-box !important;
        }
      `}</style>
    </div>
  )
}