{
  "name": "review-08-block",
  "type": "registry:block",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "separator",
    "https://ui.stackzero.co/r/star-rating-fractions.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport StarRating from \"@/components/commerce-ui/star-rating-fractions\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Globe, ThumbsUp } from \"lucide-react\";\nimport { useState } from \"react\";\n\ninterface Review_08Props {\n  reviewerName?: string;\n  reviewerAvatar?: string;\n  yearsMember?: number;\n  reviewDate?: string;\n  reviewContent?: string;\n  rating?: number;\n  isTranslated?: boolean;\n  originalLanguage?: string;\n  helpfulCount?: number;\n  responseFromHost?: string;\n  responseFromHostDate?: string;\n}\n\nfunction Review_08({\n  helpfulCount = 3,\n  isTranslated = true,\n  originalLanguage = \"French\",\n  rating = 4.5,\n  responseFromHost = \"Thank you so much for your kind words, Sarah! It was a pleasure hosting you and I'm thrilled you enjoyed the apartment and location. The patio is my favorite spot too! I hope to welcome you back soon.\",\n  responseFromHostDate = \"August 2023\",\n  reviewContent = \"This place was absolutely perfect for our weekend getaway. The location is ideal - just a short walk to great restaurants and shops. The apartment was spotlessly clean, beautifully decorated, and had all the amenities we needed. The bed was incredibly comfortable and the neighborhood was quiet at night. Our host was responsive and provided excellent recommendations for local activities. We especially loved the private patio for morning coffee. Would definitely stay here again!\",\n  reviewDate = \"August 2023\",\n  reviewerAvatar = \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/user-03.jpg\",\n  reviewerName = \"Nicole Arnaud\",\n  yearsMember = 5,\n}: Review_08Props = {}) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [helpful, setHelpful] = useState(helpfulCount);\n  const [hasMarkedHelpful, setHasMarkedHelpful] = useState(false);\n  const [showOriginal, setShowOriginal] = useState(false);\n\n  // Truncate content for preview\n  const previewContent =\n    reviewContent.length > 250 && !isExpanded\n      ? reviewContent.substring(0, 250) + \"...\"\n      : reviewContent;\n\n  return (\n    <div className=\"space-y-4 rounded-lg border p-5\">\n      <div className=\"flex items-center gap-4\">\n        <img\n          src={reviewerAvatar}\n          alt={reviewerName}\n          className=\"h-12 w-12 rounded-full object-cover\"\n        />\n        <div>\n          <div className=\"flex flex-col sm:flex-row sm:items-center sm:gap-2\">\n            <h3 className=\"font-medium\">{reviewerName}</h3>\n            <div className=\"flex items-center text-sm text-gray-500\">\n              <span>·</span>\n              <span className=\"ml-2\">\n                {yearsMember} {yearsMember === 1 ? \"year\" : \"years\"} on Lightbnb\n              </span>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <time className=\"text-sm text-gray-500\">{reviewDate}</time>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center gap-2\">\n          <StarRating value={rating} readOnly iconSize={16} />\n        </div>\n\n        {isTranslated && (\n          <div className=\"flex items-center gap-2 text-xs text-gray-500\">\n            <Globe className=\"h-3 w-3\" />\n            <span>\n              Translated from {originalLanguage}\n              <Button\n                variant=\"link\"\n                size=\"sm\"\n                className=\"h-auto p-0 px-1 text-xs font-normal text-gray-600\"\n                onClick={() => setShowOriginal(!showOriginal)}\n              >\n                {showOriginal ? \"Show translation\" : \"Show original\"}\n              </Button>\n            </span>\n          </div>\n        )}\n\n        <p className=\"\">{previewContent}</p>\n\n        {reviewContent.length > 250 && (\n          <Button\n            variant=\"link\"\n            size=\"sm\"\n            onClick={() => setIsExpanded(!isExpanded)}\n            className=\"h-auto p-0 text-gray-600\"\n          >\n            {isExpanded ? \"Show less\" : \"Show more\"}\n          </Button>\n        )}\n\n        <div className=\"flex items-center pt-1\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-8 gap-1.5 text-xs\"\n            onClick={() => {\n              if (!hasMarkedHelpful) {\n                setHelpful(helpful + 1);\n                setHasMarkedHelpful(true);\n              } else {\n                setHelpful(helpful - 1);\n                setHasMarkedHelpful(false);\n              }\n            }}\n          >\n            <ThumbsUp\n              className={`h-3.5 w-3.5 ${\n                hasMarkedHelpful ? \"fill-current\" : \"\"\n              }`}\n            />\n            Helpful{\" \"}\n            {helpful > 0 && <span className=\"text-gray-500\">({helpful})</span>}\n          </Button>\n        </div>\n      </div>\n\n      {responseFromHost && (\n        <div className=\"mt-4 ml-6 rounded-lg bg-gray-50 p-4 dark:bg-gray-800\">\n          <h4 className=\"mb-1 text-sm font-medium\">Response from host</h4>\n          <time className=\"mb-2 block text-xs text-gray-500\">\n            {responseFromHostDate}\n          </time>\n          <p className=\"text-sm text-gray-700 dark:text-gray-300\">\n            {responseFromHost}\n          </p>\n        </div>\n      )}\n\n      <Separator />\n    </div>\n  );\n}\n\nexport default Review_08;\nexport type { Review_08Props };\n",
      "path": "/components/commerce-ui/blocks/reviews/review-08.tsx",
      "target": "components/commerce-ui/review-08.tsx"
    }
  ]
}