{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ecommerce6",
  "title": "Product Reviews Section",
  "description": "Customer reviews with star ratings, verified badges, helpful voting, and load more functionality. Displays average rating summary. Perfect for building trust and social proof on product pages.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "registry/ecommerce6/ecommerce6.tsx",
      "content": "\"use client\";\n\nimport { Star, ThumbsUp } from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Review {\n  id: string;\n  author: string;\n  avatar?: string;\n  rating: number;\n  date: string;\n  title: string;\n  content: string;\n  helpful?: number;\n  verified?: boolean;\n}\n\ninterface Ecommerce6Props {\n  heading?: string;\n  averageRating?: number;\n  totalReviews?: number;\n  reviews?: Review[];\n  onLoadMore?: () => void;\n  onHelpful?: (reviewId: string) => void;\n  className?: string;\n}\n\nexport const ecommerce6Demo: Ecommerce6Props = {\n  heading: \"Customer Reviews\",\n  averageRating: 4.8,\n  totalReviews: 128,\n  reviews: [\n    {\n      id: \"rev-1\",\n      author: \"Sarah M.\",\n      avatar:\n        \"https://images.unsplash.com/photo-1525134479668-1bee5c7c6845?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDZ8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D\",\n\n      rating: 5,\n      date: \"2 days ago\",\n      title: \"Absolutely love it!\",\n      content:\n        \"The quality exceeded my expectations. Shipping was fast and the packaging was beautiful. Would definitely recommend to anyone looking for premium products.\",\n      helpful: 24,\n      verified: true,\n    },\n    {\n      id: \"rev-2\",\n      author: \"James K.\",\n      avatar:\n        \"https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGVyc29ufGVufDB8fDB8fHww\",\n\n      rating: 4,\n      date: \"1 week ago\",\n      title: \"Great product, minor issue\",\n      content:\n        \"Overall very happy with my purchase. The only reason for 4 stars is the delivery took a bit longer than expected. Product itself is fantastic.\",\n      helpful: 12,\n      verified: true,\n    },\n    {\n      id: \"rev-3\",\n      author: \"Emily R.\",\n      rating: 5,\n      date: \"2 weeks ago\",\n      title: \"Perfect gift\",\n      content:\n        \"Bought this as a gift and it was a huge hit! Beautiful craftsmanship and attention to detail. Will be ordering more.\",\n      helpful: 8,\n      verified: false,\n    },\n    {\n      id: \"rev-4\",\n      author: \"Michael T.\",\n      rating: 4,\n      date: \"3 weeks ago\",\n      title: \"Solid quality\",\n      content:\n        \"Very impressed with the build quality. Looks exactly like the photos. Would buy again.\",\n      helpful: 5,\n      verified: false,\n    },\n  ],\n};\n\nexport function Ecommerce6({\n  heading,\n  averageRating,\n  totalReviews,\n  reviews = [],\n  onLoadMore,\n  onHelpful,\n  className,\n}: Ecommerce6Props) {\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-4xl px-4 md:px-6\">\n        {/* Header */}\n        <div className=\"mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            {heading && (\n              <h2 className=\"text-2xl font-semibold md:text-3xl\">{heading}</h2>\n            )}\n            {averageRating && totalReviews && (\n              <div className=\"mt-2 flex items-center gap-2\">\n                <div className=\"flex\">\n                  {[...Array(5)].map((_, i) => (\n                    <Star\n                      key={i}\n                      className={cn(\n                        \"size-5\",\n                        i < Math.floor(averageRating)\n                          ? \"fill-yellow-400 text-yellow-400\"\n                          : \"text-muted-foreground/30\"\n                      )}\n                    />\n                  ))}\n                </div>\n                <span className=\"font-medium\">{averageRating}</span>\n                <span className=\"text-muted-foreground\">\n                  ({totalReviews} reviews)\n                </span>\n              </div>\n            )}\n          </div>\n          <Button variant=\"outline\">Write a Review</Button>\n        </div>\n\n        {/* Reviews */}\n        <div className=\"space-y-6\">\n          {reviews.map((review, index) => (\n            <div key={index} className=\"border-b pb-6 last:border-0\">\n              <div className=\"flex items-start justify-between\">\n                <div className=\"flex items-center gap-3\">\n                  {review.avatar ? (\n                    <img\n                      src={review.avatar}\n                      alt={review.author}\n                      className=\"size-10 rounded-full object-cover\"\n                    />\n                  ) : (\n                    <div className=\"flex size-10 items-center justify-center rounded-full bg-muted font-medium\">\n                      {review.author.charAt(0)}\n                    </div>\n                  )}\n                  <div>\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"font-medium\">{review.author}</span>\n                      {review.verified && (\n                        <Badge variant=\"secondary\">Verified</Badge>\n                      )}\n                    </div>\n                    <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n                      <div className=\"flex\">\n                        {[...Array(5)].map((_, i) => (\n                          <Star\n                            key={i}\n                            className={cn(\n                              \"size-3\",\n                              i < review.rating\n                                ? \"fill-yellow-400 text-yellow-400\"\n                                : \"text-muted-foreground/30\"\n                            )}\n                          />\n                        ))}\n                      </div>\n                      <span>{review.date}</span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <h3 className=\"mt-3 font-medium\">{review.title}</h3>\n              <p className=\"mt-2 text-muted-foreground\">{review.content}</p>\n\n              {review.helpful !== undefined && (\n                <Button\n                  variant=\"link\"\n                  size=\"sm\"\n                  className=\"mt-2 cursor-pointer text-muted-foreground hover:text-foreground p-0\"\n                  onClick={() => onHelpful?.(review.id)}\n                >\n                  <ThumbsUp className=\"size-4\" />\n                  <span>Helpful ({review.helpful})</span>\n                </Button>\n              )}\n            </div>\n          ))}\n        </div>\n\n        {onLoadMore && (\n          <div className=\"mt-8 text-center\">\n            <Button variant=\"outline\" onClick={onLoadMore}>\n              Load More Reviews\n            </Button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/ecommerce6.tsx"
    }
  ],
  "type": "registry:block"
}