import styles from './MapLink.module.css'
import { getLanguage } from '@/utils/telegram'

interface MapLinkProps {
  lat: number
  lon: number
  title: string
}

export function MapLink({ lat, lon }: MapLinkProps) {
  const lang = getLanguage()

  const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${lat},${lon}`
  const yandexMapsUrl = `https://yandex.ru/maps/?pt=${lon},${lat}&z=17&l=map`

  return (
    <div className={styles.container}>
      <a
        href={googleMapsUrl}
        target="_blank"
        rel="noopener noreferrer"
        className={styles.link}
      >
        {lang === 'ru' ? 'Google Maps' : 'Google Maps'}
      </a>
      <span className={styles.separator}>|</span>
      <a
        href={yandexMapsUrl}
        target="_blank"
        rel="noopener noreferrer"
        className={styles.link}
      >
        {lang === 'ru' ? 'Яндекс Карты' : 'Yandex Maps'}
      </a>
    </div>
  )
}