"use client"

import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"

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

import type { ShowMoreButtonParams } from "@/types/components/myPages/stays/button"

export default function ShowMoreButton({
  disabled,
  loadMoreData,
}: ShowMoreButtonParams) {
  const intl = useIntl()
  return (
    <div className={styles.container}>
      <Button
        disabled={disabled}
        onClick={loadMoreData}
        variant="icon"
        type="button"
        theme="base"
        intent="text"
      >
        <MaterialIcon
          icon="keyboard_arrow_down"
          size={20}
          color="CurrentColor"
        />
        {intl.formatMessage({
          id: "common.showMore",
          defaultMessage: "Show more",
        })}
      </Button>
    </div>
  )
}