'use client' import { useState, useEffect } from 'react' import { ChevronDown, Calendar, DollarSign, Users, Award } from 'lucide-react' import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" // Mock data - In a real application, this would come from an API const events = [ { id: 'event1', title: 'How to Write Top-Performing Facebook & LinkedIn Ads', date: 'Mon, May 15, 2023, 1:00 PM - 3:00 PM (EST)', points: 'Unclaimed Points....24 hours', nextDrop: '35 mins' }, { id: 'event2', title: 'University Basketball', date: 'Tue, May 16, 2023, 2:00 PM - 4:00 PM (EST)', points: 'Other Event Points....', nextDrop: 'TBD' }, ] export default function EventDashboard() { const [selectedEvent, setSelectedEvent] = useState(events[0]) const [userLocation, setUserLocation] = useState(null) useEffect(() => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => setUserLocation({ lat: position.coords.latitude, lon: position.coords.longitude }), (error) => console.error("Error getting location:", error) ) } }, []) const verifyAttendance = async () => { if (!userLocation) { alert("Unable to get your location. Please enable location services.") return } // This would typically be an API call to your backend const response = await fetch('/api/verify-attendance', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ eventId: selectedEvent.id, location: userLocation }), }) const result = await response.json() alert(result.message) } return ( ) }