"use client"
 
import useGeolocation from "@/hooks/use-geolocation"
 
export function Component() {
  const {
    loading,
    error,
    latitude,
    longitude,
    altitude,
    accuracy,
    altitudeAccuracy,
    heading,
    speed,
    timestamp,
  } = useGeolocation({
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
  })
 
  if (loading) {
    return <div>Loading geolocation data...</div>
  }
 
  if (error) {
    return <div>Error: {error.message}</div>
  }
 
  return (
    <div>
      <h2>Geolocation Data</h2>
      <p>Latitude: {latitude!.toFixed(6)}</p>
      <p>Longitude: {longitude!.toFixed(6)}</p>
      <p>Accuracy: {accuracy} meters</p>
 
      {altitude && <p>Altitude: {altitude} meters</p>}
      {altitudeAccuracy && <p>Altitude Accuracy: {altitudeAccuracy} meters</p>}
      {heading && <p>Heading: {heading}° from true north</p>}
      {speed && <p>Speed: {speed} m/s</p>}
 
      <p>Last updated: {new Date(timestamp!).toLocaleTimeString()}</p>
    </div>
  )
}