function PepperIcon({ filled, size = 14 }) {
  const path = "M14.5 2.2c.6-.3 1.3.2 1.2.9-.1.5-.4.9-.8 1.1 2.6.6 5 2.9 5.5 6 .6 4-1.6 6.7-4.6 9.8-2 2.1-4.2 3.8-6.6 4.4-1.5.4-2.8-.9-2.3-2.4.6-1.8 1.7-3.8 3.1-5.9 2.2-3.3 3.6-6.5 3.5-9.4 0-1.1.2-2.3 1-3.3-.4-.3-.4-.9 0-1.2z";
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{flexShrink:0}}>
      <path d={path} fill={filled ? 'var(--danger-500)' : 'none'} stroke={filled ? 'none' : 'var(--charcoal-600)'} strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );
}

function PepperRating({ level, max = 3, size = 14 }) {
  return (
    <div style={{display:'flex',gap:3,alignItems:'center'}}>
      {Array.from({ length: max }, (_, i) => (
        <PepperIcon key={i} filled={i < level} size={size} />
      ))}
    </div>
  );
}

window.PepperIcon = PepperIcon;
window.PepperRating = PepperRating;