{
  "name": "like-rating-basic",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "import { cn } from \"@/lib/utils\";\nimport { ThumbsDown, ThumbsUp } from \"lucide-react\";\n\ninterface LikeRatingBasicProps {\n  likes: number;\n  dislikes: number;\n  isLiked: boolean;\n  isDisliked: boolean;\n  likeIncrement?: number;\n  dislikeIncrement?: number;\n  onRatingChange: (newState: {\n    likes: number;\n    dislikes: number;\n    isLiked: boolean;\n    isDisliked: boolean;\n  }) => void;\n  className?: string;\n}\n\nconst LikeRating_Basic = ({\n  className,\n  dislikeIncrement = 1,\n  dislikes = 0,\n  isDisliked,\n  isLiked,\n  likeIncrement = 1,\n  likes = 0,\n  onRatingChange,\n}: LikeRatingBasicProps) => {\n  const handleLike = () => {\n    if (isLiked) {\n      // Undo like\n      onRatingChange({\n        dislikes,\n        isDisliked: false,\n        isLiked: false,\n        likes: likes - likeIncrement,\n      });\n    } else {\n      // Add like and remove dislike if exists\n      onRatingChange({\n        dislikes: isDisliked ? dislikes - dislikeIncrement : dislikes,\n        isDisliked: false,\n        isLiked: true,\n        likes: likes + likeIncrement,\n      });\n    }\n  };\n\n  const handleDislike = () => {\n    if (isDisliked) {\n      // Undo dislike\n      onRatingChange({\n        dislikes: dislikes - dislikeIncrement,\n        isDisliked: false,\n        isLiked: false,\n        likes,\n      });\n    } else {\n      // Add dislike and remove like if exists\n      onRatingChange({\n        dislikes: dislikes + dislikeIncrement,\n        isDisliked: true,\n        isLiked: false,\n        likes: isLiked ? likes - likeIncrement : likes,\n      });\n    }\n  };\n\n  const formatCount = (count: number) =>\n    count >= 1000 ? `${(count / 1000).toFixed(1)}K` : count.toLocaleString();\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex cursor-pointer -space-x-px rounded-lg shadow-xs shadow-black/5 rtl:space-x-reverse\",\n        className\n      )}\n    >\n      <div\n        className={cn(\n          \"flex min-w-[4rem] flex-row items-center justify-center rounded-none border px-2 py-1 font-mono shadow-none first:rounded-s-lg last:rounded-e-lg hover:bg-[#009e42]/20 focus-visible:z-10\",\n          isLiked && \"bg-[#009e42]/20 text-[#009e42]\"\n        )}\n        onClick={handleLike}\n        aria-label=\"Like\"\n        aria-labelledby=\"like-count\"\n        title=\"Like\"\n      >\n        <ThumbsUp\n          size={16}\n          strokeWidth={2}\n          aria-hidden=\"true\"\n          className={cn(\"mr-2\", isLiked && \"text-[#009e42]\")}\n        />\n        {formatCount(likes)}\n      </div>\n      <div\n        className={cn(\n          \"flex min-w-[4rem] flex-row items-center justify-center rounded-none border px-2 py-1 font-mono shadow-none first:rounded-s-lg last:rounded-e-lg hover:bg-[#a60021]/20 focus-visible:z-10\",\n          isDisliked && \"bg-[#a60021]/20 text-[#a60021]\"\n        )}\n        aria-label=\"Dislike\"\n        aria-labelledby=\"dislike-count\"\n        title=\"Dislike\"\n        onClick={handleDislike}\n      >\n        <ThumbsDown\n          size={16}\n          strokeWidth={2}\n          aria-hidden=\"true\"\n          className={cn(\"mr-2\", isDisliked && \"text-[#a60021]\")}\n        />\n        {formatCount(dislikes)}\n      </div>\n    </div>\n  );\n};\n\nexport default LikeRating_Basic;\n",
      "path": "/components/commerce-ui/components/like-rating/basic/like-rating-basic.tsx",
      "target": "components/commerce-ui/like-rating-basic.tsx"
    }
  ]
}