import { cn } from '@/lib/cn'

/**
 * A plant's emoji on a tile tinted with its own color (via color-mix, so any
 * valid CSS color works). Shared by PlantCard and the PlantPicker rows. Size and
 * shape come from `className`.
 */
export function PlantIcon({ color, icon, className }: { color: string; icon: string; className?: string }) {
  return (
    <span
      className={cn('grid shrink-0 place-items-center', className)}
      style={{ backgroundColor: `color-mix(in srgb, ${color} 18%, transparent)` }}
      aria-hidden
    >
      {icon}
    </span>
  )
}