"use client"

import { useIntl } from "react-intl"

import { ChevronDownIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"

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

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

export default function ShowMoreButton({
  disabled,
  loadMoreData,
}: ShowMoreButtonParams) {
  const { formatMessage } = useIntl()
  return (
    <div className={styles.container}>
      <Button
        disabled={disabled}
        onClick={loadMoreData}
        variant="icon"
        type="button"
        theme="base"
        intent="text"
      >
        <ChevronDownIcon />
        {formatMessage({ id: "Show more" })}
      </Button>
    </div>
  )
}