<script>
import { translateRouteTitle } from '@/lang'

export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  render(h, context) {
    const { icon, title } = context.props
    const vnodes = []
    const translatedTitle = title ? translateRouteTitle(title) : ''

    if (icon) {
      vnodes.push(<svg-icon class='menu-icon' icon-class={icon}/>)
    }

    if (translatedTitle) {
      vnodes.push(<span class='menu-title' slot='title' attrs={{ title: translatedTitle }}>{translatedTitle}</span>)
    }
    return vnodes
  }
}
</script>
