import { farbschlagImageUrl, findVariety } from '../genetics'
import './FarbschlagImage.css'

export interface FarbschlagImageProps {
  /** Variety name; may include " Schecke"/" Rex" modifiers (stripped for lookup). */
  name: string
  size?: number
}

/** Thumbnail for a Farbschlag, or null if the variety has no catalog image. */
export default function FarbschlagImage({ name, size = 40 }: FarbschlagImageProps) {
  const baseName = name.replace(/\s+(Schecke|Rex)\b/g, '').trim()
  const url = farbschlagImageUrl(findVariety(baseName)?.image ?? findVariety(name)?.image)
  if (!url) return null
  return (
    <img
      className="farbschlag-thumb"
      src={url}
      alt={name}
      width={size}
      height={size}
      loading="lazy"
    />
  )
}