import {View} from 'react-native'

import {ComingUpTile} from '@/components/home/coming-up-tile'
import {FriendRecsTile} from '@/components/home/friend-recs-tile'
import {MapTile} from '@/components/home/map-tile'
import {PinnedTile} from '@/components/home/pinned-tile'
import type {Coords} from '@/hooks/use-current-location'
import {atoms as a} from '@/sprinkles'

// glanceable awareness grid: coming up + map peers on top, pinned/shared
// trails below, friend recommendations last
export const Bento = ({center}: {center: Coords}) => (
  <View style={a.gap_md}>
    <View style={[a.flex_row, a.gap_md]}>
      <ComingUpTile />
      <MapTile center={center} />
    </View>
    <PinnedTile />
    <FriendRecsTile center={center} />
  </View>
)
