import * as React from 'react'
import * as PropTypes from 'prop-types'
import styled from 'styled-components'
import { Icon } from '../../../../react-common/src'

const Image = styled('img')({
  display: 'block',
  maxWidth: '100%',
  maxHeight: '100%',
})

export type MenuGraphicsKind = 'icon' | 'image'

export const propTypes = {
  kind: PropTypes.oneOf<MenuGraphicsKind>(['icon', 'image']).isRequired,
  alt: PropTypes.string,
  id: PropTypes.string.isRequired,
}

type Props = PropTypes.InferProps<typeof propTypes>

const MenuGraphics: React.FC<Props> = ({
  kind,
  alt,
  id,
}) => {
  switch (kind) {
    case 'icon':
      return (
        <Icon
          name={id}
        />
      )
    case 'image':
      return (
        <Image
          src={id}
          alt={alt as string}
        />
      )
    default:
      break
  }

  return null
}

MenuGraphics.propTypes = propTypes

export default MenuGraphics
