<script>
    // @ts-nocheck
    
    
        import { goto } from "$app/navigation";
    
        // Fleets data
        const fleets = [
            { user: 'Swipe', handle: '@user1', avatar: '😊'  , url: '/home/swipe'},
            { user: 'Dinner', handle: '@user2', avatar: '😎', url: '/home/dinner'},
            { user: 'Chat', handle: '@user3', avatar: '🤩', url: '/home/chat'},
            { user: 'Plan', handle: '@user4', avatar: '🥳', url: '/home/plan'},
        ];
    
        // Tweets data
        const tweets = [
            { 
                user: 'SvelteFan', 
                handle: '@svelte_dev', 
                avatar: '🚀',
                content: "Just discovered Svelte and it's amazing! #webdev",
                likes: 42,
                retweets: 12,
                time: '2h'
            },
            { 
                user: 'WebDev', 
                handle: '@webdev', 
                avatar: '💻',
                content: 'CSS grid is a game changer for layouts. Change my mind.',
                likes: 89,
                retweets: 24,
                time: '4h'
            },
        ];
    </script>
    
    <div class="container mx-auto p-4 max-w-2xl">
        <!-- Fleets Section -->
        <div class="flex space-x-4 pb-4 overflow-x-auto scrollbar-hide">
            {#each fleets as fleet}
                <div class="flex flex-col items-center space-y-2 flex-shrink-0">
                    <div class="p-1 rounded-full bg-gradient-to-tr from-primary to-secondary hover:from-secondary hover:to-primary">
                        <button on:click={goto(fleet.url)} class="avatar bg-base-200 rounded-full w-16 h-16 flex items-center justify-center text-2xl hover:opacity-90">
                            {fleet.avatar}
                        </button>
                    </div>
                    <span class="text-sm font-medium">{fleet.user}</span>
                </div>
            {/each}
        </div>
    
        <!-- Tweets Section -->
        <div class="space-y-4">
            {#each tweets as tweet}
                <div class="bg-white rounded-xl shadow-sm p-4">
                    <div class="flex gap-3">
                        <!-- Avatar -->
                        <div class="avatar bg-base-200 rounded-full w-12 h-12 flex items-center justify-center text-xl">
                            {tweet.avatar}
                        </div>
                        
                        <!-- Tweet Content -->
                        <div class="flex-1">
                            <div class="flex items-center gap-2">
                                <span class="font-bold">{tweet.user}</span>
                                <span class="text-gray-600">{tweet.handle}</span>
                                <span class="text-gray-600">· {tweet.time}</span>
                            </div>
                            
                            <p class="mt-2">{tweet.content}</p>
                            
                            <!-- Tweet Actions -->
                            <div class="flex justify-between mt-4 text-gray-600 max-w-md">
                                <button class="hover:text-primary flex items-center gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                                    </svg>
                                    {tweet.retweets}
                                </button>
                                <button class="hover:text-green-500 flex items-center gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                    </svg>
                                    {tweet.retweets}
                                </button>
                                <button class="hover:text-red-500 flex items-center gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                                    </svg>
                                    {tweet.likes}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            {/each}
        </div>
    </div>
    
    <style global>
        /* Custom scrollbar hide */
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
	
	