"use client"
import { useIntl } from "react-intl"

import { FakeButton } from "@scandic-hotels/design-system/FakeButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import styles from "./mapWithButtonWrapper.module.css"

export function MapWithButtonWrapper({ children }: React.PropsWithChildren) {
  const intl = useIntl()
  return (
    <div className={styles.container}>
      {children}
      <FakeButton
        variant="Primary"
        color="Inverted"
        size="sm"
        className={styles.button}
      >
        <MaterialIcon icon="map" color="CurrentColor" size={20} />
        {intl.formatMessage({
          id: "destination.seeOnMap",
          defaultMessage: "See on map",
        })}
      </FakeButton>
    </div>
  )
}