import styles from './MenuItem.module.css'
import { StatusDot } from '../../primitives/StatusDot/StatusDot'

type StatusDotVariant = 'live' | 'stale' | 'dead' | 'success' | 'warning' | 'error' | 'running'

interface MenuItemProps {
  label: string
  meta?: string
  count?: number
  health?: StatusDotVariant
  active?: boolean
  indent?: number
  onClick?: () => void
  className?: string
}

export function MenuItem({
  label,
  meta,
  count,
  health,
  active = false,
  indent = 0,
  onClick,
  className,
}: MenuItemProps) {
  const classes = [
    styles.item,
    active ? styles.active : '',
    className ?? '',
  ].filter(Boolean).join(' ')

  return (
    <div
      className={classes}
      style={indent ? { paddingLeft: `${12 + indent * 16}px` } : undefined}
      onClick={onClick}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') onClick?.()
      }}
    >
      {health && <StatusDot variant={health} className={styles.health} />}
      <div className={styles.info}>
        <span className={styles.name}>{label}</span>
        {meta && <span className={styles.meta}>{meta}</span>}
      </div>
      {count !== undefined && (
        <span className={styles.count}>{count}</span>
      )}
    </div>
  )
}
