{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "review-overview",
  "type": "registry:component",
  "title": "Review Overview",
  "description": "Displays an overview of review statistics including average rating, rating distribution bars, and review counts",
  "dependencies": [
    "react",
    "@registry/react"
  ],
  "registryDependencies": [
    "https://components.thgaltitude.com/r/react/ratings",
    "https://components.thgaltitude.com/r/react/progress-bar",
    "https://components.thgaltitude.com/r/react/button"
  ],
  "files": [
    {
      "path": "registry/react/component/review-overview.tsx",
      "content": "import React from \"react\";\nimport Ratings from \"@registry/react/ui/ratings\";\nimport ProgressBar from \"@registry/react/ui/progress-bar\";\nimport { Button } from \"@registry/react/ui/button\";\n\ninterface RatingScore {\n  [key: number]: number;\n}\n\ntype CreateAction = \"CREATE\";\n\ninterface ReviewOverviewProps {\n  averageRating?: number;\n  reviewCount?: number;\n  maxRating?: number;\n  minRating?: number;\n  ratings?: RatingScore;\n  onCreate?: (action: CreateAction) => void;\n}\n\nexport const ReviewOverview: React.FC<ReviewOverviewProps> = ({\n  averageRating = 2.5,\n  reviewCount = 1,\n  maxRating = 5,\n  minRating = 1,\n  ratings = {},\n  onCreate,\n}) => {\n  const getTotalRatings = () => {\n    return Object.values(ratings).reduce((total, count) => total + count, 0);\n  };\n\n  const totalRatings = getTotalRatings();\n\n  const ratingValues = Array.from(\n    { length: maxRating - minRating + 1 },\n    (_, i) => maxRating - i\n  );\n\n  return (\n    <div className=\"flex flex-col w-full gap-6\">\n      <h3 className=\"text-2lg font-medium\">Customer Reviews</h3>\n      <div className=\"flex gap-3\">\n        <Ratings\n          rating={averageRating}\n          maxRating={5}\n          className=\"skin-primary\"\n        />\n        <span className=\"text-body font-medium\">({averageRating})</span>\n      </div>\n      <span className=\"text-body font-medium\">{totalRatings} Reviews</span>\n      <div className=\"grid grid-cols-8 gap-2\">\n        {Object.keys(ratings).length > 0 && (\n          <>\n            {ratingValues.map((ratingValue) => {\n              const ratingCount = ratings[ratingValue] || 0;\n              return (\n                <React.Fragment key={`rating-${ratingValue}`}>\n                  <div className=\"col-span-7 flex gap-3 items-center\">\n                    <span>{ratingValue}</span>\n                    <Ratings\n                      rating={1}\n                      maxRating={1}\n                      iconCount={1}\n                      className=\"skin-primary shrink-0\"\n                    />\n                    <ProgressBar\n                      key={`bar-${ratingValue}`}\n                      className=\"skin-primary w-full\"\n                      value={ratingCount}\n                      maxValue={totalRatings}\n                      label={`Rating ${ratingValue}`}\n                    />\n                  </div>\n                  <div className=\"col-span-1 flex items-baseline\">\n                    <span key={`count-${ratingValue}`} className=\"text-sm\">\n                      {ratings[ratingValue] || 0}\n                    </span>\n                  </div>\n                </React.Fragment>\n              );\n            })}\n          </>\n        )}\n      </div>\n      {onCreate && (\n        <Button\n          className=\"skin-secondary w-fit\"\n          onClick={() => onCreate(\"CREATE\")}\n        >\n          Create Review\n        </Button>\n      )}\n    </div>\n  );\n};\n\nexport default ReviewOverview;\n",
      "type": "registry:component",
      "target": "react/component/review-overview.tsx"
    }
  ]
}