import {StyleSheet, View, type ViewProps} from 'react-native'

import {ExternalLink} from '@/components/external-link'
import {Text} from '@/components/ui/typography'
import {atoms as a, useTheme} from '@/sprinkles'

export const Attribution = (props: ViewProps) => {
  const t = useTheme()
  const textStyle = StyleSheet.flatten([
    a.text_xs,
    t.atoms.text_contrast_medium,
  ])

  return (
    <View {...props}>
      <Text style={textStyle}>© OpenStreetMap contributors</Text>
      <ExternalLink href="https://locationiq.com" asChild>
        <Text style={textStyle}>Search by LocationIQ.com</Text>
      </ExternalLink>
    </View>
  )
}
