import {MapCard} from '@/components/map-card'
import {TILE_HEIGHT} from '@/components/ui/tile'
import {ZoomMapLink} from '@/components/zoom-map-link'
import type {Coords} from '@/hooks/use-current-location'

// edge-to-edge map thumbnail, peer-sized beside the coming-up tile
export const MapTile = ({center}: {center: Coords}) => (
  <ZoomMapLink
    href={{
      pathname: '/map',
      params: {lat: center.latitude, lng: center.longitude, zoom: 14},
    }}
    label="Open map"
  >
    <MapCard center={center} height={TILE_HEIGHT} />
  </ZoomMapLink>
)
