import {Link, type Href} from 'expo-router'
import {type ReactNode} from 'react'
import {Pressable, StyleSheet} from 'react-native'

import {TILE_HEIGHT} from '@/components/ui/tile'
import {atoms as a} from '@/sprinkles'

// edge-to-edge map thumbnail link that keeps the apple-zoom transition
// into the full map
export const ZoomMapLink = ({
  href,
  label,
  children,
  height = TILE_HEIGHT,
}: {
  href: Href
  label: string
  children: ReactNode
  height?: number
}) => (
  <Link href={href} asChild>
    <Pressable
      accessibilityLabel={label}
      style={StyleSheet.flatten([a.flex_1, {height}])}
    >
      <Link.AppleZoom>{children}</Link.AppleZoom>
    </Pressable>
  </Link>
)
