Map Carousel

1'use client'
2 
3import { Button } from '@/components/ui/button'
4import { Checkbox } from '@/components/ui/checkbox'
5import { cn } from '@/lib/utils'
6import { ChevronDown, MapPin, Maximize2, SlidersHorizontal, X } from 'lucide-react'
7import { useCallback, useEffect, useRef, useState } from 'react'
8import { demoMapLocations, demoMapCenter, demoMapZoom } from './demo/map'
9 
10/**
11 * Represents a location/hotel to display on the map.
12 * @interface Location
13 * @property {string} [name] - Location name
14 * @property {string} [subtitle] - Subtitle (e.g., neighborhood)
15 * @property {string} [image] - Location image URL
16 * @property {number} [price] - Price value
17 * @property {string} [priceLabel] - Full price text (e.g., "$284 total Jan 29 - Feb 1")
18 * @property {string} [priceSubtext] - Additional price info (e.g., "USD • Includes taxes")
19 * @property {number} [rating] - Rating value (e.g., 8.6)
20 * @property {[number, number]} coordinates - Lat/lng coordinates
21 * @property {string} [link] - External link URL
22 */
23export interface Location {
24  name?: string
25  subtitle?: string
26  image?: string
27  price?: number
28  priceLabel?: string
29  priceSubtext?: string
30  rating?: number
31  coordinates: [number, number] // [lat, lng]
32  link?: string
33}
34 
35/**
36 * Available map tile styles.
37 * @typedef {"voyager" | "voyager-smooth" | "positron" | "dark-matter" | "openstreetmap"} MapStyle
38 */
39export type MapStyle =
40  | 'voyager'
41  | 'voyager-smooth'
42  | 'positron'
43  | 'dark-matter'
44  | 'openstreetmap'
45 
46// Filter configuration for fullscreen variant
47/**
48 * Configuration for a single filter section.
49 * @interface FilterSectionConfig
50 */
51export interface FilterSectionConfig {
52  /** Unique identifier for this filter (used in filter state). */
53  id: string
54  /** Display title for the filter section. */
55  title: string
56  /** Available options for this filter. */
57  options: string[]
58  /**
59   * Function to check if a location matches the selected filter values.
60   * @param location - The location to check
61   * @param selectedValues - Currently selected filter values
62   * @returns true if location matches, false otherwise
63   */
64  matchFn?: (location: Location, selectedValues: string[]) => boolean
65}
66 
67/** State tracking selected values for each filter by id. */
68export type FilterState = Record<string, string[]>
69 
70const createEmptyFilterState = (filters: FilterSectionConfig[]): FilterState => {
71  return filters.reduce((acc, filter) => {
72    acc[filter.id] = []
73    return acc
74  }, {} as FilterState)
75}
76 
77// … truncated