import React from 'react'
import styled from 'styled-components'
import googleIcon from './google-maps-icon.png'

export type LocationProps = {
  css?: string
  latitude: string;
  longitude: string
};

export const Location = ({ latitude, longitude, css }: LocationProps):JSX.Element => {
  return (
    <LocationPin 
      src={googleIcon}
      css={css}
      onClick={()=> window.open(`https://www.google.com/maps?q=${latitude},${longitude}`, '_blank')} /> 
  )
}

const LocationPin = styled.img<{css?:string}>`
  cursor: pointer;

  ${(p) => p.css}
`
