review-08-block

1"use client";
2 
3import StarRating from "@/components/commerce-ui/star-rating-fractions";
4import { Button } from "@/components/ui/button";
5import { Separator } from "@/components/ui/separator";
6import { Globe, ThumbsUp } from "lucide-react";
7import { useState } from "react";
8 
9interface Review_08Props {
10  reviewerName?: string;
11  reviewerAvatar?: string;
12  yearsMember?: number;
13  reviewDate?: string;
14  reviewContent?: string;
15  rating?: number;
16  isTranslated?: boolean;
17  originalLanguage?: string;
18  helpfulCount?: number;
19  responseFromHost?: string;
20  responseFromHostDate?: string;
21}
22 
23function Review_08({
24  helpfulCount = 3,
25  isTranslated = true,
26  originalLanguage = "French",
27  rating = 4.5,
28  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.",
29  responseFromHostDate = "August 2023",
30  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!",
31  reviewDate = "August 2023",
32  reviewerAvatar = "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/user-03.jpg",
33  reviewerName = "Nicole Arnaud",
34  yearsMember = 5,
35}: Review_08Props = {}) {
36  const [isExpanded, setIsExpanded] = useState(false);
37  const [helpful, setHelpful] = useState(helpfulCount);
38  const [hasMarkedHelpful, setHasMarkedHelpful] = useState(false);
39  const [showOriginal, setShowOriginal] = useState(false);
40 
41  // Truncate content for preview
42  const previewContent =
43    reviewContent.length > 250 && !isExpanded
44      ? reviewContent.substring(0, 250) + "..."
45      : reviewContent;
46 
47  return (
48    <div className="space-y-4 rounded-lg border p-5">
49      <div className="flex items-center gap-4">
50        <img
51          src={reviewerAvatar}
52          alt={reviewerName}
53          className="h-12 w-12 rounded-full object-cover"
54        />
55        <div>
56          <div className="flex flex-col sm:flex-row sm:items-center sm:gap-2">
57// … truncated