"use client"

import { useIntl } from "react-intl"

import { Button } from "@scandic-hotels/design-system/Button"
import { Typography } from "@scandic-hotels/design-system/Typography"

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

interface RetryProps {
  handleRefetch: () => void
}

export default function Retry({ handleRefetch }: RetryProps) {
  const intl = useIntl()
  return (
    <div className={styles.retry}>
      <Typography variant={"Body/Paragraph/mdRegular"}>
        <p>
          {intl.formatMessage({
            defaultMessage: "Something went wrong!",
          })}
        </p>
      </Typography>

      <Button size={"Small"} onPress={handleRefetch}>
        {intl.formatMessage({
          defaultMessage: "Try again",
        })}
      </Button>
    </div>
  )
}