review-09-block

1"use client";
2 
3import StarRating from "@/components/commerce-ui/star-rating-fractions";
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6import {
7  DropdownMenu,
8  DropdownMenuContent,
9  DropdownMenuItem,
10  DropdownMenuTrigger,
11} from "@/components/ui/dropdown-menu";
12import { Input } from "@/components/ui/input";
13import { Check, Search, SlidersHorizontal, X } from "lucide-react";
14import { useState } from "react";
15 
16interface Review_09Props {
17  onFilterChange?: (filters: ReviewFilters) => void;
18  totalReviews?: number;
19  averageRating?: number;
20  commonKeywords?: string[];
21}
22 
23interface ReviewFilters {
24  ratings: number[];
25  sortBy: string;
26  keywords: string[];
27  searchTerm: string;
28}
29 
30function Review_09({
31  averageRating = 4.8,
32  commonKeywords = [
33    "Clean",
34    "Comfortable",
35    "Great location",
36    "Spacious",
37    "Value for money",
38    "Friendly host",
39    "Quiet",
40    "Well equipped",
41  ],
42  onFilterChange,
43  totalReviews = 214,
44}: Review_09Props) {
45  const [filters, setFilters] = useState<ReviewFilters>({
46    keywords: ["Clean", "Comfortable"],
47    ratings: [4, 5],
48    searchTerm: "",
49    sortBy: "Most recent",
50  });
51 
52  const [showMobileFilters, setShowMobileFilters] = useState(false);
53 
54  const sortOptions = [
55    "Most recent",
56    "Highest rated",
57    "Lowest rated",
58    "Most helpful",
59  ];
60 
61  const handleFilterChange = (updatedFilters: Partial<ReviewFilters>) => {
62    const newFilters = { ...filters, ...updatedFilters };
63    setFilters(newFilters);
64    onFilterChange?.(newFilters);
65  };
66 
67  const toggleKeyword = (keyword: string) => {
68    const newKeywords = filters.keywords.includes(keyword)
69      ? filters.keywords.filter((k) => k !== keyword)
70      : [...filters.keywords, keyword];
71 
72    handleFilterChange({ keywords: newKeywords });
73  };
74 
75  const toggleRating = (rating: number) => {
76    const newRatings = filters.ratings.includes(rating)
77      ? filters.ratings.filter((r) => r !== rating)
78      : [...filters.ratings, rating];
79 
80    handleFilterChange({ ratings: newRatings });
81  };
82 
83  return (
84    <div className="space-y-4 rounded-md border p-4">
85      <div className="flex flex-col justify-between gap-4 border-b border-gray-200 pb-4 sm:flex-row sm:items-center dark:border-gray-800">
86        <div className="space-y-1">
87          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
88            Reviews ({totalReviews})
89          </h3>
90// … truncated