import {MapPreview} from '@/components/ui/map-preview'
import type {Coords} from '@/hooks/use-current-location'
import {isLocated, toMarker} from '@/lib/geo'
import {useTheme} from '@/sprinkles'
import {useRecentCrumbs} from '@/stores/crumbs'
import {useCycleIndex} from '@/stores/cycle-index'

// omit height to fill the parent (e.g. a square bento tile). previews the
// most recent located crumbs rather than the full set
export const MapCard = ({
  center,
  height,
}: {
  center: Coords
  height?: number
}) => {
  const t = useTheme()
  const crumbs = useRecentCrumbs()
  const cycleIndex = useCycleIndex()
  const markers = crumbs
    .filter(isLocated)
    .map((c) => toMarker(c, t.palette.bg, cycleIndex))

  return (
    <MapPreview
      center={center}
      markers={markers}
      zoom={14}
      height={height}
      showMyLocation
      style={t.atoms.bg_contrast_25}
    />
  )
}
