import { Card } from "@heroui/react"
import { createFileRoute } from "@tanstack/react-router"
import { Drone } from "lucide-react"
import { useState } from "react"
import {
	Map as MapComponent,
	MapMarker,
	type MapViewport,
	MarkerContent,
	MarkerPopup,
	MarkerTooltip
} from "@/components/maps/map"

export const Route = createFileRoute("/_auth/dashboard")({
	component: RouteComponent
})

function RouteComponent() {
	const locations = [
		{
			id: 1,
			name: "Location 1",
			lat: 40.76,
			lng: -73.98
		},
		{
			id: 2,
			name: "Location 2",
			lat: 40.77,
			lng: -73.99
		},
		{
			id: 3,
			name: "Location 3",
			lat: 40.5874827,
			lng: -1.7925343
		}
	]
	const [viewport, setViewport] = useState<MapViewport>({
		center: [40.5874827, -1.7925343],
		zoom: 8,
		bearing: 0,
		pitch: 0
	})
	return (
		<div>
			<Card className="h-200 p-0 overflow-hidden">
				<MapComponent
					center={[40.5874827, -1.7925343]}
					zoom={10}
					viewport={viewport}
					onViewportChange={setViewport}
				>
					{locations.map((location) => (
						<MapMarker
							key={location.id}
							longitude={location.lng}
							latitude={location.lat}
						>
							{/* Prueba para ssl */}
							<MarkerContent>
								<Drone size={24} color="green" className="text-green-200" />
							</MarkerContent>
							<MarkerTooltip>{location.name}</MarkerTooltip>
							<MarkerPopup>
								<div className="space-y-1">
									<p className="font-medium text-foreground">{location.name}</p>
									<p className="text-xs text-muted-foreground">
										{location.lat.toFixed(4)}, {location.lng.toFixed(4)}
									</p>
								</div>
							</MarkerPopup>
						</MapMarker>
					))}
				</MapComponent>
			</Card>
		</div>
	)
}