import type { CSSProperties } from 'react'

import styles from './MenuItemThumbnail.module.scss'

type MenuItemThumbnailProps = {
  name: string
  size?: 'small' | 'hero'
  style?: CSSProperties
}

const UtensilsIcon = () => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.5"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M7 3v7a2 2 0 0 0 2 2v9" />
    <path d="M7 3v4M11 3v4" />
    <path d="M17 3c-1.5 0-2.5 2-2.5 5s1 5 1.5 5v9" />
  </svg>
)

const photoByKeyword: Array<{ keyword: string; src: string }> = [
  { keyword: 'pizza', src: '/pizza.png' },
  { keyword: 'burger', src: '/burger.png' },
]

// Falls back to a simple icon for any menu item that isn't Pizza or Burger,
// since there's no photo for it yet.
const photoFor = (name: string) => {
  const lower = name.toLowerCase()
  return photoByKeyword.find((entry) => lower.includes(entry.keyword))?.src
}

export const MenuItemThumbnail = ({
  name,
  size = 'small',
  style,
}: MenuItemThumbnailProps) => {
  const src = photoFor(name)
  return (
    <div
      className={`${styles.thumbnail} ${size === 'hero' ? styles.hero : ''}`}
      style={style}
      aria-hidden="true"
    >
      {src ? (
        <img src={src} alt="" className={styles.photo} />
      ) : (
        <UtensilsIcon />
      )}
    </div>
  )
}