import {
    closestCenter,
    DndContext,
    DragEndEvent,
    DragOverlay,
    DragStartEvent,
    PointerSensor,
    TouchSensor,
    useSensor,
    useSensors,
} from '@dnd-kit/core'
import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'
import { restrictToVerticalAxis } from '@dnd-kit/modifiers'
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { HeartFillIcon } from '@primer/octicons-react'
import { InfiniteData } from '@tanstack/react-query'
import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { toast } from 'sonner'
import { useNavigate } from 'react-router-dom'
import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'
import { MediaItem } from '../api/jellyfin'
import { useDropdownContext } from '../context/DropdownContext/DropdownContext'
import { IMenuItems } from '../context/DropdownContext/DropdownContextProvider'
import { usePlaybackContext } from '../context/PlaybackContext/PlaybackContext'
import { useDownloadContext } from '../context/DownloadContext/DownloadContext'
import { useFavorites } from '../hooks/useFavorites'
import { IReviver } from './PlaybackManager'
import { useDisplayItems } from '../hooks/useDisplayItems'
import { JellyImg } from './JellyImg'
import { Loader } from './Loader'
import { UnifiedDownloadIndicator } from './UnifiedDownloadIndicator'
import './MediaList.css'
import { Skeleton } from './Skeleton'
import { MediaDetailModal } from './MediaDetailModal'
import { ErrorBoundary } from './ErrorBoundary'
import { Squircle } from './Squircle'
import { PlaystateAnimationMedalist } from './SvgIcons'

export const MediaList = ({
    items = [],
    infiniteData,
    isLoading,
    reviver,
    loadMore,
    hidden: _hidden = {},
    disableActions = false,
    albumDisplayMode = 'artist',
    type,
    title,
    isDraggable,
    onSort,
    discoverMode = false,
    onDiscoverDownload,
}: {
    items: MediaItem[]
    infiniteData?: InfiniteData<MediaItem[], unknown>
    isLoading: boolean
    reviver?: IReviver | 'persistAll'
    type: 'song' | 'album' | 'artist' | 'playlist'
    loadMore?: (startIndex: number) => void
    title: string
    isDraggable?: boolean
    onSort?: (items: MediaItem[]) => void
    disableActions?: boolean
    albumDisplayMode?: 'artist' | 'year' | 'both'
    hidden?: IMenuItems
    discoverMode?: boolean
    onDiscoverDownload?: (item: MediaItem) => void
}) => {
    const [selectedDetailItem, setSelectedDetailItem] = useState<MediaItem | null>(null)
    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
    const playback = usePlaybackContext()
    const navigate = useNavigate()
    const dropdown = useDropdownContext()
    const virtuosoRef = useRef<VirtuosoHandle>(null)
    const [scrollParent, setScrollParent] = useState<HTMLElement | undefined>(undefined)

    // Favorites hook moved to top-level so hooks are not called inside nested render functions
    const { addToFavorites, removeFromFavorites } = useFavorites()

    // Per-item swipe state stored in a ref map to avoid calling hooks inside renderItem
    const swipeRefs = useRef<Record<string, { startX: number; startY: number; swiped: boolean; direction: 'left' | 'right' | null }>>({})

    const handlePlayNext = useCallback(async (item: MediaItem) => {
        try {
            if (playback.currentTrackIndex >= 0) {
                await playback.updateCurrentPlaylist(async pages => {
                    const flat = pages.flat()
                    const insertAt = Math.min(playback.currentTrackIndex + 1, flat.length)
                    flat.splice(insertAt, 0, { ...item })

                    const newPages: typeof pages = []
                    let offset = 0
                    for (const page of pages) {
                        const len = page.length
                        newPages.push(flat.slice(offset, offset + len))
                        offset += len
                    }
                    if (offset < flat.length) newPages.push(flat.slice(offset))
                    return newPages
                })
                toast.success(`"${item.Name}" will play next`)
            } else if (infiniteData) {
                playback.setCurrentPlaylist({ pages: infiniteData, title, reviver })
                playback.playTrack(0)
                toast.success(`Started playing "${item.Name}"`)
            }
        } catch (err) {
            console.error('Play next failed:', err)
            toast.error('Could not add to queue')
        }
    }, [playback, infiniteData, title, reviver])

    const handleToggleFavorite = useCallback(async (item: MediaItem) => {
        try {
            if (item.UserData?.IsFavorite) {
                await removeFromFavorites(item)
                toast.success(`Removed "${item.Name}" from favorites`)
            } else {
                await addToFavorites(item)
                toast.success(`Added "${item.Name}" to favorites`)
            }
        } catch (err) {
            console.error('Toggle favorite failed:', err)
            toast.error('Could not update favorites')
        }
    }, [addToFavorites, removeFromFavorites])

    const getSwipeHandlers = useCallback((item: MediaItem) => {
        const id = item.queueId || item.Id

        const onSwipeTouchStart: React.TouchEventHandler<HTMLDivElement> = e => {
            const touch = e.touches[0]
            swipeRefs.current[id] = {
                startX: touch.clientX,
                startY: touch.clientY,
                swiped: false,
                direction: null,
            }
        }

        const onSwipeTouchMove: React.TouchEventHandler<HTMLDivElement> = e => {
            const state = swipeRefs.current[id]
            if (!state || state.swiped) return

            const touch = e.touches[0]
            const dx = touch.clientX - state.startX
            const dy = touch.clientY - state.startY

            if (Math.abs(dy) > Math.abs(dx)) return

            const swipeThreshold = 80

            if (dx < -swipeThreshold && !state.swiped) {
                state.swiped = true
                state.direction = 'left'
                handlePlayNext(item)
            } else if (dx > swipeThreshold && !state.swiped) {
                state.swiped = true
                state.direction = 'right'
                handleToggleFavorite(item)
            }
        }

        const onSwipeTouchEnd: React.TouchEventHandler<HTMLDivElement> = () => {
            setTimeout(() => {
                const state = swipeRefs.current[id]
                if (state) {
                    state.swiped = false
                    state.direction = null
                }
            }, 300)
        }

        return { onSwipeTouchStart, onSwipeTouchMove, onSwipeTouchEnd }
    }, [handlePlayNext, handleToggleFavorite])

    const handleItemClick = (item: MediaItem, index: number) => {
        if (discoverMode) {
            // In discover mode, open the detail modal
            setSelectedDetailItem(item)
            setIsDetailModalOpen(true)
        } else {
            // Normal behavior for regular MediaList
            if (type === 'song') {
                const isCurrentTrack = playback.currentTrack?.Id === item.Id
                if (item.SpotifyId) {
                    alert('Spotify tracks need to be downloaded before playback. Please use the download button first.')
                    return
                }
                
                if (isCurrentTrack) {
                    playback.togglePlayPause()
                } else {
                    if (infiniteData) {
                        playback.setCurrentPlaylist({ pages: infiniteData, title, reviver })
                    }
                    playback.playTrack(index)
                }
            } else if (type === 'album') {
                navigate(`/album/${item.Id}`)
            } else if (type === 'artist') {
                navigate(`/artist/${item.Id}`)
            } else if (type === 'playlist') {
                navigate(`/playlist/${item.Id}`)
            }
        }
    }

    const closeDetailModal = () => {
        setIsDetailModalOpen(false)
        setSelectedDetailItem(null)
    }

    useEffect(() => {
        // Try multiple selectors to find the correct scroll parent
        const selectors = ['.main_content', '.main > .main_content', 'main > .main_content']
        let foundParent = null
        
        for (const selector of selectors) {
            const element = document.querySelector(selector) as HTMLElement
            if (element) {
                foundParent = element
                break
            }
        }
        
        // Fallback to window if no specific scroll parent is found
        if (!foundParent) {
            console.warn('Could not find scroll parent, falling back to window')
        }
        
        setScrollParent(foundParent || undefined)
    }, [items.length])

    const { displayItems, setRowRefs } = useDisplayItems(items, isLoading)

    const hidden: IMenuItems = disableActions
        ? {
              ..._hidden,
              next: true,
              add_to_queue: true,
              download_song: true,
              add_to_playlist: true
          }
        : _hidden

    const [activeId, setActiveId] = useState<string | null>(null)

    const handleDragStart = useCallback((event: DragStartEvent) => {
        setActiveId(event.active.id as string)
    }, [])

    const handleDragEnd = useCallback(
        (event: DragEndEvent) => {
            const { active, over } = event
            if (over && active.id !== over.id) {
                const oldIndex = items.findIndex(i => (i.queueId || i.Id) === active.id)
                const newIndex = items.findIndex(i => (i.queueId || i.Id) === over.id)
                const newItems = arrayMove(items, oldIndex, newIndex)
                onSort?.(newItems)
            }
            setActiveId(null)
        },
        [items, onSort]
    )

    const renderItem = (
        index: number,
        item: MediaItem | { isPlaceholder: true },
        listeners?: SyntheticListenerMap | undefined
    ) => {
        if ('isPlaceholder' in item) {
            if (type === 'album') {
                return (
                    <div className="media-item album-item" ref={el => setRowRefs(index, el)}>
                        <Skeleton type="album" />
                    </div>
                )
            } else if (type === 'artist') {
                return (
                    <div className="media-item artist-item" ref={el => setRowRefs(index, el)}>
                        <Skeleton type="artist" />
                    </div>
                )
            } else if (type === 'playlist') {
                return (
                    <div className="media-item album-item" ref={el => setRowRefs(index, el)}>
                        <Skeleton type="album" />
                    </div>
                )
            } else {
                return (
                    <div className="media-item song-item" ref={el => setRowRefs(index, el)}>
                        <Skeleton type="song" />
                    </div>
                )
            }
        }

        if (type === 'album') {
            const isActive = dropdown.selectedItem?.Id === item.Id && dropdown.isOpen

            const itemClass = [isActive ? 'active' : ''].filter(Boolean).join(' ')

            return (
                <div
                    className={`media-item album-item ${itemClass}`}
                    onClick={() => handleItemClick(item, index)}
                    onContextMenu={e => dropdown.onContextMenu(e, { item }, false, hidden)}
                    onTouchStart={e => dropdown.onTouchStart(e, { item }, false, hidden)}
                    onTouchMove={dropdown.onTouchClear}
                    onTouchEnd={dropdown.onTouchClear}
                >
                    <Squircle width={46} height={46} cornerRadius={6} className="media-state">
                        <JellyImg item={item} type={'Primary'} width={46} height={46} />
                    </Squircle>
                    <div className="media-details">
                        <span className="song-name">{item.Name}</span>
                        <div className="container">
                            {type === 'album' ? (
                                <div className="album-artist">
                                    {albumDisplayMode === 'year' && item.ProductionYear ? (
                                        <>{item.ProductionYear}</>
                                    ) : albumDisplayMode === 'both' && item.ProductionYear ? (
                                        <>
                                            {item.AlbumArtist}
                                            <span className="divider" />
                                            {item.ProductionYear}
                                        </>
                                    ) : (
                                        <>{item.AlbumArtist}</>
                                    )}
                                    {discoverMode && item.ChildCount && (
                                        <span className="track-count">{item.ChildCount} tracks</span>
                                    )}
                                </div>
                            ) : (
                                <>
                                    {albumDisplayMode === 'year' && <div className="year">{item.ProductionYear}</div>}
                                    {albumDisplayMode === 'artist' && (
                                        <div className="artist">{item.AlbumArtist || 'Unknown Artist'}</div>
                                    )}
                                    {albumDisplayMode === 'both' && (
                                        <>
                                            <div className="year">{item.ProductionYear}</div>
                                            <div className="divider"></div>
                                            <div className="artist">{item.AlbumArtist || 'Unknown Artist'}</div>
                                        </>
                                    )}
                                </>
                            )}
                        </div>
                    </div>

                    <MediaIndicators
                        item={item}
                        disableActions={disableActions}
                        listeners={listeners}
                        isDraggable={isDraggable}
                        discoverMode={discoverMode}
                        onDiscoverDownload={onDiscoverDownload}
                    />
                </div>
            )
        } else if (type === 'artist') {
            const isActive = dropdown.selectedItem?.Id === item.Id && dropdown.isOpen

            const itemClass = [isActive ? 'active' : ''].filter(Boolean).join(' ')

            return (
                <div
                    className={`media-item artist-item ${itemClass}`}
                    onClick={() => handleItemClick(item, index)}
                    onContextMenu={e => dropdown.onContextMenu(e, { item }, false, hidden)}
                    onTouchStart={e => dropdown.onTouchStart(e, { item }, false, hidden)}
                    onTouchMove={dropdown.onTouchClear}
                    onTouchEnd={dropdown.onTouchClear}
                >
                    <Squircle width={46} height={46} cornerRadius={100} className="media-state">
                        <JellyImg item={item} type={'Primary'} width={46} height={46} />
                    </Squircle>
                    <div className="media-details">
                        <span className="song-name">{item.Name}</span>
                    </div>

                    <MediaIndicators
                        item={item}
                        disableActions={disableActions}
                        listeners={listeners}
                        isDraggable={isDraggable}
                        discoverMode={discoverMode}
                        onDiscoverDownload={onDiscoverDownload}
                    />
                </div>
            )
        } else if (type === 'playlist') {
            const isActive = dropdown.selectedItem?.Id === item.Id && dropdown.isOpen

            const itemClass = [isActive ? 'active' : ''].filter(Boolean).join(' ')

            return (
                <div
                    className={`media-item playlist-item ${itemClass}`}
                    onClick={() => handleItemClick(item, index)}
                    onContextMenu={e => dropdown.onContextMenu(e, { item }, false, hidden)}
                    onTouchStart={e => dropdown.onTouchStart(e, { item }, false, hidden)}
                    onTouchMove={dropdown.onTouchClear}
                    onTouchEnd={dropdown.onTouchClear}
                >
                    <Squircle width={46} height={46} cornerRadius={6} className="media-state">
                        <JellyImg item={item} type={'Primary'} width={46} height={46} />
                    </Squircle>
                    <div className="media-details">
                        <span className="song-name">{item.Name}</span>
                        <div className="container">
                            <div className="track-amount">
                                <span className="number">{item.ChildCount || 0}</span>{' '}
                                <span>{(item.ChildCount || 0) === 1 ? 'Track' : 'Tracks'}</span>
                            </div>
                        </div>
                    </div>

                    <MediaIndicators
                        item={item}
                        disableActions={disableActions}
                        listeners={listeners}
                        isDraggable={isDraggable}
                        discoverMode={discoverMode}
                        onDiscoverDownload={onDiscoverDownload}
                    />
                </div>
            )
        } else {
            const isCurrentTrack = playback.currentTrack?.Id === item.Id
            const isActive = dropdown.selectedItem?.Id === item.Id && dropdown.isOpen

            const itemClass = [
                isCurrentTrack ? (playback.isPlaying ? 'playing' : 'paused') : '',
                isActive ? 'active' : '',
            ]
                .filter(Boolean)
                .join(' ')

            const { onSwipeTouchStart, onSwipeTouchMove, onSwipeTouchEnd } = getSwipeHandlers(item)

            // Use top-level handlers for play next and toggle favorite

            return (
                <div
                    className={`media-item song-item ${itemClass}`}
                    onClick={() => handleItemClick(item, index)}
                    ref={el => setRowRefs(index, el)}
                    onContextMenu={e => dropdown.onContextMenu(e, { item }, false, hidden)}
                    onTouchStart={e => {
                        // Handle both dropdown and swipe gestures
                        dropdown.onTouchStart(e, { item }, false, hidden)
                        onSwipeTouchStart(e)
                    }}
                    onTouchMove={e => {
                        dropdown.onTouchClear()
                        onSwipeTouchMove(e)
                    }}
                    onTouchEnd={e => {
                        dropdown.onTouchClear()
                        onSwipeTouchEnd(e)
                    }}
                >
                    <Squircle width={46} height={46} cornerRadius={6} className="media-state">
                        <JellyImg item={item} type={'Primary'} width={46} height={46} />

                        <div className="overlay">
                            <div className="container">
                                <div className="play">
                                    <div className="play-icon"></div>
                                </div>
                                <div className="pause">
                                    <div className="pause-icon"></div>
                                </div>
                            </div>
                            <div className="play-state-animation">
                                <PlaystateAnimationMedalist width={28} height={20} className="sound-bars" />
                            </div>
                        </div>
                    </Squircle>
                    <div className="media-details">
                        <div className="song-title-row">
                            <span className="song-name">{item.Name}</span>
                            
                            {/* Inline indicators right next to song name */}
                            {/* Show existing track indicators */}
                            {discoverMode && (item as any).existingTrackInfo?.exists && (
                                <div className="existing-indicators-inline">
                                    {(item as any).existingTrackInfo.total_versions > 1 ? (
                                        <span 
                                            className="versions-badge"
                                            title={`${(item as any).existingTrackInfo.total_versions} versions downloaded`}
                                        >
                                            {(item as any).existingTrackInfo.total_versions}✓
                                        </span>
                                    ) : (
                                        <span className="downloaded-badge" title="Already downloaded">✓</span>
                                    )}
                                    
                                    {(item as any).existingTrackInfo.has_explicit && (
                                        <span className="version-badge explicit" title="Explicit version exists">E</span>
                                    )}
                                    {(item as any).existingTrackInfo.has_clean && (
                                        <span className="version-badge clean" title="Clean version exists">C</span>
                                    )}
                                </div>
                            )}
                            
                            {/* Show explicit marker */}
                            {(() => {
                                const trackName = item.Name?.toLowerCase() || '';
                                const isExplicit = (
                                    (item as any).isExplicit || 
                                    (item as any).Explicit || 
                                    trackName.includes('explicit') || 
                                    trackName.includes('uncensored') ||
                                    trackName.includes('(explicit)') ||
                                    trackName.includes('[explicit]') ||
                                    trackName.includes('dirty') ||
                                    trackName.includes('(dirty)') ||
                                    trackName.includes('[dirty]') ||
                                    (item.Path && (
                                        item.Path.toLowerCase().includes('explicit') || 
                                        item.Path.toLowerCase().includes('uncensored') ||
                                        item.Path.toLowerCase().includes('dirty')
                                    ))
                                );
                                return isExplicit;
                            })() && (
                                <span className="explicit-badge-inline" title="Explicit Content">E</span>
                            )}
                            {/* Note: existingTrackInfo badges are only shown in discoverMode above */}
                        </div>
                        
                        <div className="container">
                            <div className="artist">
                                {item.Artists && item.Artists.length > 0 ? item.Artists.join(', ') : 'Unknown Artist'}
                            </div>
                            <div className="divider"></div>
                            <div className="album">{item.Album || 'Unknown Album'}</div>
                        </div>
                    </div>

                    <MediaIndicators
                        item={item}
                        disableActions={disableActions}
                        listeners={listeners}
                        isDraggable={isDraggable}
                        discoverMode={discoverMode}
                        onDiscoverDownload={onDiscoverDownload}
                    />
                </div>
            )
        }
    }

    if (isLoading && items.length === 0) {
        return <Loader />
    }

    if (items.length === 0 && !isLoading) {
        return (
            <div className="empty">
                {type === 'song'
                    ? 'No tracks were found'
                    : type === 'album'
                    ? 'No albums were found'
                    : type === 'artist'
                    ? 'No artists were found'
                    : 'No playlists were found'}
            </div>
        )
    }

    return (
        <ul className="media-list noSelect">
            {isDraggable && (
                <DraggableVirtuoso
                    handleDragStart={handleDragStart}
                    handleDragEnd={handleDragEnd}
                    items={items}
                    renderItem={renderItem}
                    activeId={activeId}
                >
                    <Virtuoso
                        ref={virtuosoRef}
                        data={displayItems}
                        customScrollParent={scrollParent}
                        itemContent={(index, item) => {
                            if ('isPlaceholder' in item) {
                                return renderItem(index, item)
                            }

                            return (
                                <SortableItem
                                    key={item.queueId || item.Id}
                                    id={item.queueId || item.Id}
                                    cb={({ listeners }) => renderItem(index, item, listeners)}
                                />
                            )
                        }}
                        endReached={loadMore ? (startIndex) => loadMore(startIndex) : undefined}
                        overscan={800}
                    />
                </DraggableVirtuoso>
            )}

            {!isDraggable && (
                <Virtuoso
                    ref={virtuosoRef}
                    data={displayItems}
                    customScrollParent={scrollParent}
                    itemContent={renderItem}
                    endReached={loadMore ? (startIndex) => loadMore(startIndex) : undefined}
                    overscan={800}
                />
            )}

            {/* Media Detail Modal */}
            <ErrorBoundary
                fallback={
                    <div className="modal-error-fallback">
                        <p>Unable to load media details. Please try again.</p>
                        <button onClick={closeDetailModal}>Close</button>
                    </div>
                }
            >
                <MediaDetailModal
                    item={selectedDetailItem}
                    isOpen={isDetailModalOpen}
                    onClose={closeDetailModal}
                    onDownload={onDiscoverDownload}
                />
            </ErrorBoundary>
        </ul>
    )
}

const DraggableVirtuoso = ({
    handleDragStart,
    handleDragEnd,
    items,
    renderItem,
    activeId,
    children,
}: {
    handleDragStart: (event: DragStartEvent) => void
    handleDragEnd: (event: DragEndEvent) => void
    items: MediaItem[]
    renderItem: (index: number, item: MediaItem | { isPlaceholder: true }) => React.ReactNode
    activeId: string | null
    children: React.ReactNode
}) => {
    const sensors = useSensors(useSensor(PointerSensor), useSensor(TouchSensor))

    return (
        <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragStart={handleDragStart}
            onDragEnd={handleDragEnd}
            modifiers={[restrictToVerticalAxis]}
        >
            <SortableContext items={items.map(i => i.queueId || i.Id)} strategy={verticalListSortingStrategy}>
                {children}
            </SortableContext>
            <DragOverlay className="drag-overlay">
                {activeId
                    ? renderItem(
                          items.findIndex(i => (i.queueId || i.Id) === activeId),
                          items.find(i => (i.queueId || i.Id) === activeId) || { isPlaceholder: true }
                      )
                    : null}
            </DragOverlay>
        </DndContext>
    )
}

const SortableItem = ({
    id,
    cb,
}: {
    id: string
    cb: (props: { listeners: SyntheticListenerMap | undefined }) => ReactNode
}) => {
    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id })

    const style = {
        transform: CSS.Transform.toString(transform),
        transition: isDragging ? 'none' : transition,
        zIndex: isDragging ? 999 : undefined,
        opacity: isDragging ? 0 : 1,
    }

    const memoCb = useMemo(() => cb({ listeners }), [listeners, cb])

    return (
        <li ref={setNodeRef} className={isDragging ? 'active' : ''} style={style} {...attributes}>
            {memoCb}
        </li>
    )
}

const MediaIndicators = ({
    item,
    disableActions,
    listeners,
    isDraggable,
    discoverMode = false,
    onDiscoverDownload,
}: {
    item: MediaItem
    disableActions: boolean
    listeners?: SyntheticListenerMap | undefined
    isDraggable?: boolean
    discoverMode?: boolean
    onDiscoverDownload?: (item: MediaItem) => void
}) => {
    // Import the DownloadContext
    const downloadContext = useDownloadContext()
    
    // Function to handle download for Discover page
    const handleDiscoverDownload = (item: MediaItem) => {
        console.log('Download initiated for:', item.Name)
        
        if (onDiscoverDownload) {
            // Use custom download handler if provided
            onDiscoverDownload(item)
        } else if (downloadContext) {
            // Use the existing download functionality
            downloadContext.addToDownloads([item], undefined)
        }
    }

    // Removed debug logging to clean up console

    return (
        <div className="media-indicators">
            {/* Single unified download indicator */}
            <UnifiedDownloadIndicator 
                item={item}
                onDownload={discoverMode && !disableActions ? handleDiscoverDownload : undefined}
                discoverMode={discoverMode}
                size="small"
            />

            {!disableActions && item.UserData?.IsFavorite && location.pathname !== '/favorites' && (
                <div className="favorited" title="Favorited">
                    <HeartFillIcon size={16} />
                </div>
            )}

            {isDraggable && (
                <div className="draggable" title="Drag" {...listeners}>
                    <div className="grid">
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                        <div className="dot"></div>
                    </div>
                </div>
            )}
        </div>
    )
}