{
  "context": "This criteria evaluates how well the engineer uses the emoji-picker-react package to implement a message composer with emoji support. The focus is on proper integration of the EmojiPicker component, handling emoji selection events, and managing picker visibility.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "EmojiPicker Import",
      "description": "Correctly imports the EmojiPicker component from the 'emoji-picker-react' package using the default import (e.g., `import EmojiPicker from 'emoji-picker-react'` or `import EmojiPicker from 'emoji-picker-react/dist/index'`).",
      "max_score": 15
    },
    {
      "name": "EmojiPicker Component Usage",
      "description": "Renders the EmojiPicker component in the JSX when the picker should be visible. The component should be conditionally rendered based on a state variable that controls visibility.",
      "max_score": 20
    },
    {
      "name": "onEmojiClick Handler",
      "description": "Implements the onEmojiClick prop on the EmojiPicker component with a callback function that receives emoji click data. The handler should be used to insert the selected emoji into the message.",
      "max_score": 30
    },
    {
      "name": "Emoji Data Extraction",
      "description": "Correctly extracts the emoji character from the EmojiClickData object (typically using the `emoji` property) to insert it into the textarea.",
      "max_score": 20
    },
    {
      "name": "Picker Visibility Control",
      "description": "Uses React state to control the visibility of the EmojiPicker component, toggling it when the 'Add Emoji' button is clicked. The picker should be hidden by default and only shown when explicitly toggled.",
      "max_score": 15
    }
  ]
}