{
  "name": "face-rating-basic",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  AngryIcon,\n  FrownIcon,\n  LaughIcon,\n  MehIcon,\n  SmileIcon,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nconst DEFAULT_COLORS = {\n  angry: \"red\",\n  frown: \"orange\",\n  laugh: \"green\",\n  meh: \"yellow\",\n  smile: \"lightgreen\",\n};\n\ninterface FaceRatingBasicProps {\n  value: number;\n  onChange: (value: number) => void;\n  className?: string;\n  iconSize?: number;\n}\n\nconst FaceRating_Basic = ({\n  className,\n  iconSize = 24,\n  onChange,\n  value,\n}: FaceRatingBasicProps) => {\n  const handleIconClick = (index: number) => {\n    const newRating = index + 1;\n    onChange(newRating);\n  };\n\n  const icons = [\n    <AngryIcon\n      key=\"angry\"\n      size={iconSize}\n      color={value === 1 ? DEFAULT_COLORS.angry : \"gray\"}\n      onClick={() => handleIconClick(0)}\n      className=\"transition-transform duration-200 hover:scale-110\"\n      style={{ cursor: \"pointer\" }}\n    />,\n    <FrownIcon\n      key=\"frown\"\n      size={iconSize}\n      color={value === 2 ? DEFAULT_COLORS.frown : \"gray\"}\n      onClick={() => handleIconClick(1)}\n      className=\"transition-transform duration-200 hover:scale-110\"\n      style={{ cursor: \"pointer\" }}\n    />,\n    <MehIcon\n      key=\"meh\"\n      size={iconSize}\n      color={value === 3 ? DEFAULT_COLORS.meh : \"gray\"}\n      onClick={() => handleIconClick(2)}\n      className=\"transition-transform duration-200 hover:scale-110\"\n      style={{ cursor: \"pointer\" }}\n    />,\n    <SmileIcon\n      key=\"smile\"\n      size={iconSize}\n      color={value === 4 ? DEFAULT_COLORS.smile : \"gray\"}\n      onClick={() => handleIconClick(3)}\n      className=\"transition-transform duration-200 hover:scale-110\"\n      style={{ cursor: \"pointer\" }}\n    />,\n    <LaughIcon\n      key=\"laugh\"\n      size={iconSize}\n      color={value === 5 ? DEFAULT_COLORS.laugh : \"gray\"}\n      onClick={() => handleIconClick(4)}\n      className=\"transition-transform duration-200 hover:scale-110\"\n      style={{ cursor: \"pointer\" }}\n    />,\n  ];\n\n  return (\n    <div className={cn(\"flex items-center gap-x-0.5\", className)}>{icons}</div>\n  );\n};\n\nexport default FaceRating_Basic;\n",
      "path": "/components/commerce-ui/components/face-rating/basic/face-rating-basic.tsx",
      "target": "components/commerce-ui/face-rating-basic.tsx"
    }
  ]
}