{
  "name": "review-07-block",
  "type": "registry:block",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "https://ui.stackzero.co/r/like-rating-basic.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport LikeRating from \"@/components/commerce-ui/like-rating-basic\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Building,\n  Calendar,\n  Clock,\n  Frown,\n  MapPin,\n  Smile,\n  Users,\n} from \"lucide-react\";\nimport { useState } from \"react\";\n\ntype StayType = \"Solo\" | \"Couple\" | \"Family\" | \"Friends\" | \"Business\";\n\ninterface Review_07Props {\n  reviewerName?: string;\n  reviewerCountry?: string;\n  reviewerAvatar?: string;\n  roomType?: string;\n  stayDuration?: number;\n  stayType?: StayType;\n  reviewTitle?: string;\n  reviewScore?: number;\n  positiveHighlight?: string;\n  negativeHighlight?: string;\n  reviewContent?: string;\n  reviewDate?: string;\n  initialLikes?: number;\n  initialDislikes?: number;\n  initialIsLiked?: boolean;\n  initialIsDisliked?: boolean;\n}\n\nfunction Review_07({\n  initialDislikes = 3,\n  initialIsDisliked = false,\n  initialIsLiked = false,\n  initialLikes = 24,\n  negativeHighlight = \"Bathroom could use an update, shower pressure was weak\",\n  positiveHighlight = \"Breathtaking ocean views and incredibly attentive staff\",\n  reviewContent = \"We stayed for a week in the Deluxe Ocean View Suite and were blown away by the panoramic views. Waking up to the sound of waves every morning was therapeutic. The staff went above and beyond, especially the concierge who helped us book local experiences. The room was spacious and the bed comfortable, though the bathroom fixtures showed signs of age. The breakfast buffet offered excellent variety and the rooftop pool area was never too crowded. Would definitely return, but would request a recently renovated room next time.\",\n  reviewDate = \"May 12, 2023\",\n  reviewerAvatar = \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/user-02.jpg\",\n  reviewerCountry = \"Spain\",\n  reviewerName = \"Maria Lopez\",\n  reviewScore = 8.5,\n  reviewTitle = \"Amazing view, excellent service\",\n  roomType = \"Deluxe Ocean View Suite\",\n  stayDuration = 7,\n  stayType = \"Couple\",\n}: Review_07Props = {}) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [likes, setLikes] = useState(initialLikes);\n  const [dislikes, setDislikes] = useState(initialDislikes);\n  const [isLiked, setIsLiked] = useState(initialIsLiked);\n  const [isDisliked, setIsDisliked] = useState(initialIsDisliked);\n\n  // Format score for display (ensure it has one decimal place)\n  const formattedScore = reviewScore.toFixed(1);\n\n  // Determine score color based on value\n  const getScoreColor = () => {\n    if (reviewScore >= 9) return \"bg-emerald-300 dark:bg-emerald-500\";\n    if (reviewScore >= 7) return \"bg-blue-300 dark:bg-blue-500\";\n    if (reviewScore >= 5) return \"bg-amber-300 dark:bg-amber-500\";\n    return \"bg-red-300 dark:bg-red-500\";\n  };\n\n  return (\n    <div className=\"rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900\">\n      <div className=\"flex flex-col md:flex-row\">\n        {/* Reviewer information */}\n        <div className=\"flex-shrink-0 border-b border-gray-200 bg-gray-50 p-6 md:w-64 md:border-r md:border-b-0 dark:border-gray-800 dark:bg-gray-950\">\n          <div className=\"mb-4 flex items-center gap-4\">\n            <img\n              src={reviewerAvatar}\n              alt={reviewerName}\n              className=\"h-12 w-12 rounded-full object-cover ring-2 ring-white dark:ring-gray-800\"\n            />\n\n            <div>\n              <h3 className=\"mb-1 font-semibold text-gray-900 dark:text-gray-100\">\n                {reviewerName}\n              </h3>\n              <div className=\"flex items-center text-sm text-gray-600 dark:text-gray-400\">\n                <MapPin className=\"mr-1.5 h-4 w-4 text-gray-500\" />\n                {reviewerCountry}\n              </div>\n            </div>\n          </div>\n\n          <div className=\"space-y-3 text-sm\">\n            <div className=\"flex items-start\">\n              <Building className=\"mr-1.5 h-5 w-5 text-gray-500\" />\n              <span className=\"text-gray-700 dark:text-gray-300\">\n                {roomType}\n              </span>\n            </div>\n\n            <div className=\"flex items-start\">\n              <Calendar className=\"mr-1.5 h-5 w-5 text-gray-500\" />\n              <span className=\"text-gray-700 dark:text-gray-300\">\n                {stayDuration} {stayDuration === 1 ? \"night\" : \"nights\"}\n              </span>\n            </div>\n\n            <div className=\"flex items-start\">\n              <Users className=\"mr-1.5 h-5 w-5 text-gray-500\" />\n              <span className=\"text-gray-700 dark:text-gray-300\">\n                {stayType} traveler\n              </span>\n            </div>\n\n            <div className=\"flex items-start\">\n              <Clock className=\"mr-1.5 h-5 w-5 text-gray-500\" />\n              <time className=\"text-gray-700 dark:text-gray-300\">\n                {reviewDate}\n              </time>\n            </div>\n          </div>\n        </div>\n\n        {/* Review content */}\n        <div className=\"flex-1 p-6\">\n          <div className=\"mb-4 flex items-start justify-between\">\n            <h2 className=\"text-xl font-semibold text-gray-900 dark:text-gray-100\">\n              {reviewTitle}\n            </h2>\n            <div\n              className={`ml-4 flex h-9 w-fit shrink-0 items-center justify-center rounded-t-md rounded-br-md p-2 text-2xl font-semibold ${getScoreColor()}`}\n            >\n              {formattedScore}\n            </div>\n          </div>\n\n          <div className=\"mb-5 space-y-3\">\n            <div className=\"flex items-start rounded-lg bg-green-50 p-3 dark:bg-green-900/20\">\n              <Smile className=\"mr-3 h-5 w-5 shrink-0 text-green-600 dark:text-green-400\" />\n              <p className=\"text-sm text-green-800 dark:text-green-200\">\n                {positiveHighlight}\n              </p>\n            </div>\n\n            <div className=\"flex items-start rounded-lg bg-red-50 p-3 dark:bg-red-900/20\">\n              <Frown className=\"mr-3 h-5 w-5 shrink-0 text-red-600 dark:text-red-400\" />\n              <p className=\"text-sm text-red-800 dark:text-red-200\">\n                {negativeHighlight}\n              </p>\n            </div>\n          </div>\n\n          <div className=\"mb-5\">\n            <p\n              className={`text-gray-700 dark:text-gray-300 ${!isExpanded && \"line-clamp-3\"}`}\n            >\n              {reviewContent}\n            </p>\n            {reviewContent.length > 180 && (\n              <Button\n                variant=\"link\"\n                size=\"sm\"\n                onClick={() => setIsExpanded(!isExpanded)}\n                className=\"mt-2 h-auto p-0 text-blue-600 dark:text-blue-400\"\n              >\n                {isExpanded ? \"Show less\" : \"Read more\"}\n              </Button>\n            )}\n          </div>\n\n          <div className=\"mt-4 border-t border-gray-200 pt-4 dark:border-gray-800\">\n            <div className=\"flex items-center justify-between\">\n              <p className=\"text-sm text-gray-600 dark:text-gray-400\">\n                Was this review helpful?\n              </p>\n              <LikeRating\n                dislikes={dislikes}\n                isDisliked={isDisliked}\n                isLiked={isLiked}\n                likes={likes}\n                onRatingChange={(newState) => {\n                  setLikes(newState.likes);\n                  setDislikes(newState.dislikes);\n                  setIsLiked(newState.isLiked);\n                  setIsDisliked(newState.isDisliked);\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Review_07;\nexport type { Review_07Props, StayType };\n",
      "path": "/components/commerce-ui/blocks/reviews/review-07.tsx",
      "target": "components/commerce-ui/review-07.tsx"
    }
  ]
}